blockworks-foundation
/
solana
mirror of https://github.com/blockworks-foundation/solana.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explorer: Update bootstrap and dashkit (#21458) 

* Update dashkit style assets

* Update bootstrap to v5

* Fixes for new dashkit and bootstrap

* Fix deprecation warnings in dashkit

* Bump bootstrap to v5.1
This commit is contained in:
Justin Starry 2021-11-28 14:49:22 -06:00 committed by GitHub
parent 160fb69d7d
commit ffb5518cbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
192 changed files with 3349 additions and 2150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
explorer/package-lock.json generated
View File

@ -36,7 +36,7 @@
"@types/socket.io-client": "^3.0.0", "@types/socket.io-client": "^3.0.0",
"bignumber.js": "^9.0.1", "bignumber.js": "^9.0.1",
"bn.js": "^5.2.0", "bn.js": "^5.2.0",
"bootstrap": "^4.6.0", "bootstrap": "~5.1.3",
"bs58": "^4.0.1", "bs58": "^4.0.1",
"chai": "^4.3.4", "chai": "^4.3.4",
"chart.js": "^2.9.4", "chart.js": "^2.9.4",
@ -4858,6 +4858,16 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
"integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@project-serum/anchor": { "node_modules/@project-serum/anchor": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz", "resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@ -8229,16 +8239,15 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
}, },
"node_modules/bootstrap": { "node_modules/bootstrap": {
"version": "4.6.0", "version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/bootstrap" "url": "https://opencollective.com/bootstrap"
}, },
"peerDependencies": { "peerDependencies": {
"jquery": "1.9.1 - 3", "@popperjs/core": "^2.10.2"
"popper.js": "^1.16.1"
} }
}, },
"node_modules/borsh": { "node_modules/borsh": {
@ -17948,12 +17957,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"peer": true
},
"node_modules/js-sha256": { "node_modules/js-sha256": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@ -20067,17 +20070,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/portfinder": { "node_modules/portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -31093,6 +31085,12 @@
} }
} }
}, },
"@popperjs/core": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
"integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
"peer": true
},
"@project-serum/anchor": { "@project-serum/anchor": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz", "resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@ -33721,9 +33719,9 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
}, },
"bootstrap": { "bootstrap": {
"version": "4.6.0", "version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {} "requires": {}
}, },
"borsh": { "borsh": {
@ -41199,12 +41197,6 @@
} }
} }
}, },
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"peer": true
},
"js-sha256": { "js-sha256": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@ -42910,12 +42902,6 @@
"ts-pnp": "^1.1.6" "ts-pnp": "^1.1.6"
} }
}, },
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
"peer": true
},
"portfinder": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

2
explorer/package.json
View File

@ -31,7 +31,7 @@
"@types/socket.io-client": "^3.0.0", "@types/socket.io-client": "^3.0.0",
"bignumber.js": "^9.0.1", "bignumber.js": "^9.0.1",
"bn.js": "^5.2.0", "bn.js": "^5.2.0",
"bootstrap": "^4.6.0", "bootstrap": "~5.1.3",
"bs58": "^4.0.1", "bs58": "^4.0.1",
"chai": "^4.3.4", "chai": "^4.3.4",
"chart.js": "^2.9.4", "chart.js": "^2.9.4",

124
explorer/src/components/ClusterModal.tsx
View File

@ -5,7 +5,6 @@ import { Location } from "history";
import { import {
useCluster, useCluster,
ClusterStatus, ClusterStatus,
clusterUrl,
clusterName, clusterName,
clusterSlug, clusterSlug,
CLUSTERS, CLUSTERS,
@ -34,52 +33,50 @@ export function ClusterModal() {
return ( return (
<> <>
<div <div
className={`modal fade fixed-right${show ? " show" : ""}`} className={`offcanvas offcanvas-end${show ? " show" : ""}`}
onClick={onClose} onClick={onClose}
> >
<div className="modal-dialog modal-dialog-vertical"> <div className="modal-body" onClick={(e) => e.stopPropagation()}>
<div className="modal-content"> <span className="c-pointer" onClick={onClose}>
<div className="modal-body" onClick={(e) => e.stopPropagation()}> &times;
<span className="c-pointer" onClick={onClose}> </span>
&times;
</span>
<h2 className="text-center mb-4 mt-4">Choose a Cluster</h2> <h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
<ClusterToggle /> <ClusterToggle />
{showDeveloperSettings && ( {showDeveloperSettings && (
<> <>
<hr /> <hr />
<h2 className="text-center mb-4 mt-4">Developer Settings</h2> <h2 className="text-center mb-4 mt-4">Developer Settings</h2>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<span className="mr-3">Enable custom url param</span> <span className="me-3">Enable custom url param</span>
<div className="custom-control custom-switch d-inline"> <div className="form-check form-switch">
<input <input
type="checkbox" type="checkbox"
defaultChecked={enableCustomUrl} defaultChecked={enableCustomUrl}
className="custom-control-input" className="form-check-input"
id="cardToggle" id="cardToggle"
onChange={onToggleCustomUrlFeature} onChange={onToggleCustomUrlFeature}
/> />
<label <label
className="custom-control-label" className="form-check-label"
htmlFor="cardToggle" htmlFor="cardToggle"
></label> ></label>
</div> </div>
</div> </div>
<p className="text-muted font-size-sm mt-3"> <p className="text-muted font-size-sm mt-3">
Enable this setting to easily connect to a custom cluster Enable this setting to easily connect to a custom cluster via
via the "customUrl" url param. the "customUrl" url param.
</p> </p>
</> </>
)} )}
</div>
</div>
</div> </div>
</div> </div>
<Overlay show={show} /> <div onClick={onClose}>
<Overlay show={show} />
</div>
</> </>
); );
} }
@ -93,8 +90,9 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
const customClass = (prefix: string) => const btnClass = active
active ? `${prefix}-${activeSuffix}` : ""; ? `border-${activeSuffix} text-${activeSuffix}`
: "btn-white";
const clusterLocation = (location: Location) => { const clusterLocation = (location: Location) => {
if (customUrl.length > 0) { if (customUrl.length > 0) {
@ -118,31 +116,26 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
const inputTextClass = editing ? "" : "text-muted"; const inputTextClass = editing ? "" : "text-muted";
return ( return (
<Link <>
to={(location) => clusterLocation(location)} <Link className={`btn col-12 mb-3 ${btnClass}`} to={clusterLocation}>
className="btn input-group input-group-merge p-0" Custom RPC URL
> </Link>
<input {active && (
type="text" <input
defaultValue={customUrl} type="text"
className={`form-control form-control-prepended ${inputTextClass} ${customClass( defaultValue={customUrl}
"border" className={`form-control ${inputTextClass}`}
)}`} onFocus={() => setEditing(true)}
onFocus={() => setEditing(true)} onBlur={() => setEditing(false)}
onBlur={() => setEditing(false)} onInput={(e) => onUrlInput(e.currentTarget.value)}
onInput={(e) => onUrlInput(e.currentTarget.value)} />
/> )}
<div className="input-group-prepend"> </>
<div className={`input-group-text pr-0 ${customClass("border")}`}>
<span className={customClass("text") || ""}>Custom:</span>
</div>
</div>
</Link>
); );
} }
function ClusterToggle() { function ClusterToggle() {
const { status, cluster, customUrl } = useCluster(); const { status, cluster } = useCluster();
let activeSuffix = ""; let activeSuffix = "";
switch (status) { switch (status) {
@ -193,13 +186,10 @@ function ClusterToggle() {
return ( return (
<Link <Link
key={index} key={index}
className={`btn text-left col-12 mb-3 ${btnClass}`} className={`btn col-12 mb-3 ${btnClass}`}
to={clusterLocation} to={clusterLocation}
> >
{`${clusterName(net)}: `} {clusterName(net)}
<span className="text-muted d-inline-block">
{clusterUrl(net, customUrl).replace("explorer-", "")}
</span>
</Link> </Link>
); );
})} })}

6
explorer/src/components/ClusterStatusButton.tsx
View File

@ -36,13 +36,13 @@ function Button() {
return `btn d-block btn-${variant}`; return `btn d-block btn-${variant}`;
}; };
const spinnerClasses = "spinner-grow spinner-grow-sm mr-2"; const spinnerClasses = "spinner-grow spinner-grow-sm me-2";
switch (status) { switch (status) {
case ClusterStatus.Connected: case ClusterStatus.Connected:
return ( return (
<span className={btnClasses("primary")}> <span className={btnClasses("primary")}>
<span className="fe fe-check-circle mr-2"></span> <span className="fe fe-check-circle me-2"></span>
{statusName} {statusName}
</span> </span>
); );
@ -62,7 +62,7 @@ function Button() {
case ClusterStatus.Failure: case ClusterStatus.Failure:
return ( return (
<span className={btnClasses("danger")}> <span className={btnClasses("danger")}>
<span className="fe fe-alert-circle mr-2"></span> <span className="fe fe-alert-circle me-2"></span>
{statusName} {statusName}
</span> </span>
); );

2
explorer/src/components/MessageBanner.tsx
View File

@ -67,7 +67,7 @@ export function MessageBanner() {
<div className="container"> <div className="container">
<div className="d-flex flex-column align-items-center justify-content-center text-center py-3"> <div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
<h3 className="mb-0 line-height-md"> <h3 className="mb-0 line-height-md">
<span className="fe fe-alert-circle mr-2"></span> <span className="fe fe-alert-circle me-2"></span>
{message} {message}
</h3> </h3>
{timeframe} {timeframe}

4
explorer/src/components/Navbar.tsx
View File

@ -24,11 +24,11 @@ export function Navbar() {
</button> </button>
<div <div
className={`collapse navbar-collapse ml-auto mr-4 ${ className={`collapse navbar-collapse ms-auto me-4 ${
collapse ? "show" : "" collapse ? "show" : ""
}`} }`}
> >
<ul className="navbar-nav mr-auto"> <ul className="navbar-nav me-auto">
<li className="nav-item"> <li className="nav-item">
<NavLink className="nav-link" to={clusterPath("/")} exact> <NavLink className="nav-link" to={clusterPath("/")} exact>
Cluster Stats Cluster Stats

4
explorer/src/components/ProgramLogsCardBody.tsx
View File

@ -42,13 +42,13 @@ export function ProgramLogsCardBody({
<tr key={index}> <tr key={index}>
<td> <td>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<span className={`badge badge-soft-${badgeColor} mr-2`}> <span className={`badge bg-${badgeColor}-soft me-2`}>
#{index + 1} #{index + 1}
</span> </span>
{programName} Instruction {programName} Instruction
</div> </div>
{programLogs && ( {programLogs && (
<div className="d-flex align-items-start flex-column text-monospace p-2 font-size-sm"> <div className="d-flex align-items-start flex-column font-monospace p-2 font-size-sm">
{programLogs.logs.map((log, key) => { {programLogs.logs.map((log, key) => {
return ( return (
<span key={key}> <span key={key}>

4
explorer/src/components/SearchBar.tsx
View File

@ -21,7 +21,7 @@ export function SearchBar() {
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
const { tokenRegistry } = useTokenRegistry(); const { tokenRegistry } = useTokenRegistry();
const { cluster, epochInfo } = useCluster(); const { cluster, clusterInfo } = useCluster();
const onChange = ( const onChange = (
{ pathname }: ValueType<any, false>, { pathname }: ValueType<any, false>,
@ -48,7 +48,7 @@ export function SearchBar() {
search, search,
cluster, cluster,
tokenRegistry, tokenRegistry,
epochInfo?.epoch clusterInfo?.epochInfo.epoch
)} )}
noOptionsMessage={() => "No Results"} noOptionsMessage={() => "No Results"}
placeholder="Search for blocks, accounts, transactions, programs, and tokens" placeholder="Search for blocks, accounts, transactions, programs, and tokens"

6
explorer/src/components/SupplyCard.tsx
View File

@ -32,14 +32,14 @@ export function SupplyCard() {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Total Supply (SOL)</td> <td className="w-100">Total Supply (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={supply.total} maximumFractionDigits={0} /> <SolBalance lamports={supply.total} maximumFractionDigits={0} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Circulating Supply (SOL)</td> <td className="w-100">Circulating Supply (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance <SolBalance
lamports={supply.circulating} lamports={supply.circulating}
maximumFractionDigits={0} maximumFractionDigits={0}
@ -49,7 +49,7 @@ export function SupplyCard() {
<tr> <tr>
<td className="w-100">Non-Circulating Supply (SOL)</td> <td className="w-100">Non-Circulating Supply (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance <SolBalance
lamports={supply.nonCirculating} lamports={supply.nonCirculating}
maximumFractionDigits={0} maximumFractionDigits={0}

23
explorer/src/components/TopAccountsCard.tsx
View File

@ -86,7 +86,7 @@ export function TopAccountsCard() {
{richList === Status.Idle && ( {richList === Status.Idle && (
<div className="card-body"> <div className="card-body">
<span <span
className="btn btn-white ml-3 d-none d-md-inline" className="btn btn-white ms-3 d-none d-md-inline"
onClick={fetchRichList} onClick={fetchRichList}
> >
Load Largest Accounts Load Largest Accounts
@ -101,10 +101,8 @@ export function TopAccountsCard() {
<tr> <tr>
<th className="text-muted">Rank</th> <th className="text-muted">Rank</th>
<th className="text-muted">Address</th> <th className="text-muted">Address</th>
<th className="text-muted text-right">Balance (SOL)</th> <th className="text-muted text-end">Balance (SOL)</th>
<th className="text-muted text-right"> <th className="text-muted text-end">% of {header} Supply</th>
% of {header} Supply
</th>
</tr> </tr>
</thead> </thead>
<tbody className="list"> <tbody className="list">
@ -128,18 +126,17 @@ const renderAccountRow = (
return ( return (
<tr key={index}> <tr key={index}>
<td> <td>
<span className="badge badge-soft-gray badge-pill">{index + 1}</span> <span className="badge bg-gray-soft badge-pill">{index + 1}</span>
</td> </td>
<td> <td>
<Address pubkey={account.address} link /> <Address pubkey={account.address} link />
</td> </td>
<td className="text-right"> <td className="text-end">
<SolBalance lamports={account.lamports} maximumFractionDigits={0} /> <SolBalance lamports={account.lamports} maximumFractionDigits={0} />
</td> </td>
<td className="text-right">{`${( <td className="text-end">{`${((100 * account.lamports) / supply).toFixed(
(100 * account.lamports) / 3
supply )}%`}</td>
).toFixed(3)}%`}</td>
</tr> </tr>
); );
}; };
@ -203,9 +200,7 @@ const FilterDropdown = ({ filter, toggle, show }: DropdownProps) => {
> >
{filterTitle(filter)} {filterTitle(filter)}
</button> </button>
<div <div className={`dropdown-menu-end dropdown-menu${show ? " show" : ""}`}>
className={`dropdown-menu-right dropdown-menu${show ? " show" : ""}`}
>
{FILTERS.map((filterOption) => { {FILTERS.map((filterOption) => {
return ( return (
<Link <Link

6
explorer/src/components/TpsCard.tsx
View File

@ -172,11 +172,11 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Transaction count</td> <td className="w-100">Transaction count</td>
<td className="text-lg-right text-monospace">{transactionCount} </td> <td className="text-lg-end font-monospace">{transactionCount} </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Transactions per second (TPS)</td> <td className="w-100">Transactions per second (TPS)</td>
<td className="text-lg-right text-monospace">{averageTps} </td> <td className="text-lg-end font-monospace">{averageTps} </td>
</tr> </tr>
</TableCardBody> </TableCardBody>
@ -192,7 +192,7 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
<button <button
key={key} key={key}
onClick={() => setSeries(key)} onClick={() => setSeries(key)}
className={classNames("btn btn-sm btn-white ml-2", { className={classNames("btn btn-sm btn-white ms-2", {
active: series === key, active: series === key,
})} })}
> >

2
explorer/src/components/account/BlockhashesCard.tsx
View File

@ -52,7 +52,7 @@ const renderAccountRow = (entry: RecentBlockhashesEntry, index: number) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-1">{index + 1}</td> <td className="w-1">{index + 1}</td>
<td className="w-1 text-monospace">{entry.blockhash}</td> <td className="w-1 font-monospace">{entry.blockhash}</td>
<td className=""> <td className="">
{entry.feeCalculator.lamportsPerSignature} lamports per signature {entry.feeCalculator.lamportsPerSignature} lamports per signature
</td> </td>

14
explorer/src/components/account/ConfigAccountSection.tsx
View File

@ -67,12 +67,12 @@ function StakeConfigCard({
<tr> <tr>
<td>Warmup / Cooldown Rate</td> <td>Warmup / Cooldown Rate</td>
<td className="text-lg-right">{warmupCooldownFormatted}</td> <td className="text-lg-end">{warmupCooldownFormatted}</td>
</tr> </tr>
<tr> <tr>
<td>Slash Penalty</td> <td>Slash Penalty</td>
<td className="text-lg-right">{slashPenaltyFormatted}</td> <td className="text-lg-end">{slashPenaltyFormatted}</td>
</tr> </tr>
</TableCardBody> </TableCardBody>
</div> </div>
@ -101,7 +101,7 @@ function ValidatorInfoCard({
{configAccount.info.configData.name && ( {configAccount.info.configData.name && (
<tr> <tr>
<td>Name</td> <td>Name</td>
<td className="text-lg-right"> <td className="text-lg-end">
{configAccount.info.configData.name} {configAccount.info.configData.name}
</td> </td>
</tr> </tr>
@ -110,7 +110,7 @@ function ValidatorInfoCard({
{configAccount.info.configData.keybaseUsername && ( {configAccount.info.configData.keybaseUsername && (
<tr> <tr>
<td>Keybase Username</td> <td>Keybase Username</td>
<td className="text-lg-right"> <td className="text-lg-end">
{configAccount.info.configData.keybaseUsername} {configAccount.info.configData.keybaseUsername}
</td> </td>
</tr> </tr>
@ -119,7 +119,7 @@ function ValidatorInfoCard({
{configAccount.info.configData.website && ( {configAccount.info.configData.website && (
<tr> <tr>
<td>Website</td> <td>Website</td>
<td className="text-lg-right"> <td className="text-lg-end">
<a <a
href={configAccount.info.configData.website} href={configAccount.info.configData.website}
target="_blank" target="_blank"
@ -134,7 +134,7 @@ function ValidatorInfoCard({
{configAccount.info.configData.details && ( {configAccount.info.configData.details && (
<tr> <tr>
<td>Details</td> <td>Details</td>
<td className="text-lg-right"> <td className="text-lg-end">
{configAccount.info.configData.details} {configAccount.info.configData.details}
</td> </td>
</tr> </tr>
@ -143,7 +143,7 @@ function ValidatorInfoCard({
{configAccount.info.keys && configAccount.info.keys.length > 1 && ( {configAccount.info.keys && configAccount.info.keys.length > 1 && (
<tr> <tr>
<td>Signer</td> <td>Signer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={new PublicKey(configAccount.info.keys[1].pubkey)} pubkey={new PublicKey(configAccount.info.keys[1].pubkey)}
link link

6
explorer/src/components/account/HistoryCardComponents.tsx
View File

@ -30,12 +30,12 @@ export function HistoryCardHeader({
> >
{fetching ? ( {fetching ? (
<> <>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</> </>
) : ( ) : (
<> <>
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</> </>
)} )}
@ -65,7 +65,7 @@ export function HistoryCardFooter({
> >
{fetching ? ( {fetching ? (
<> <>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</> </>
) : ( ) : (

38
explorer/src/components/account/MetaplexNFTHeader.tsx
View File

@ -17,20 +17,20 @@ export function NFTHeader({
const metadata = nftData.metadata; const metadata = nftData.metadata;
return ( return (
<div className="row"> <div className="row">
<div className="col-auto ml-2 d-flex align-items-center"> <div className="col-auto ms-2 d-flex align-items-center">
<ArtContent metadata={metadata} pubkey={address} /> <ArtContent metadata={metadata} pubkey={address} />
</div> </div>
<div className="col mb-3 ml-0.5 mt-3"> <div className="col mb-3 ms-0.5 mt-3">
{<h6 className="header-pretitle ml-1">Metaplex NFT</h6>} {<h6 className="header-pretitle ms-1">Metaplex NFT</h6>}
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<h2 className="header-title ml-1 align-items-center no-overflow-with-ellipsis"> <h2 className="header-title ms-1 align-items-center no-overflow-with-ellipsis">
{metadata.data.name !== "" {metadata.data.name !== ""
? metadata.data.name ? metadata.data.name
: "No NFT name was found"} : "No NFT name was found"}
</h2> </h2>
{getEditionPill(nftData.editionInfo)} {getEditionPill(nftData.editionInfo)}
</div> </div>
<h4 className="header-pretitle ml-1 mt-1 no-overflow-with-ellipsis"> <h4 className="header-pretitle ms-1 mt-1 no-overflow-with-ellipsis">
{metadata.data.symbol !== "" {metadata.data.symbol !== ""
? metadata.data.symbol ? metadata.data.symbol
: "No Symbol was found"} : "No Symbol was found"}
@ -43,7 +43,7 @@ export function NFTHeader({
<button <button
className="btn btn-dark btn-sm dropdown-toggle creators-dropdown-button-width" className="btn btn-dark btn-sm dropdown-toggle creators-dropdown-button-width"
type="button" type="button"
data-toggle="dropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
> >
@ -72,12 +72,12 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
"d-flex align-items-center dropdown-header creator-dropdown-entry" "d-flex align-items-center dropdown-header creator-dropdown-entry"
} }
> >
<div className="d-flex text-monospace creator-dropdown-header"> <div className="d-flex font-monospace creator-dropdown-header">
<span>Creator Address</span> <span>Creator Address</span>
<InfoTooltip bottom text={creatorTooltip} /> <InfoTooltip bottom text={creatorTooltip} />
</div> </div>
<div className="d-flex text-monospace"> <div className="d-flex font-monospace">
<span className="text-monospace">Royalty</span> <span className="font-monospace">Royalty</span>
<InfoTooltip bottom text={shareTooltip} /> <InfoTooltip bottom text={shareTooltip} />
</div> </div>
</div> </div>
@ -86,24 +86,24 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
const getVerifiedIcon = (isVerified: boolean) => { const getVerifiedIcon = (isVerified: boolean) => {
const className = isVerified ? "fe fe-check" : "fe fe-alert-octagon"; const className = isVerified ? "fe fe-check" : "fe fe-alert-octagon";
return <i className={`ml-3 ${className}`}></i>; return <i className={`ms-3 ${className}`}></i>;
}; };
const CreatorEntry = (creator: Creator) => { const CreatorEntry = (creator: Creator) => {
return ( return (
<div <div
className={ className={
"d-flex align-items-center text-monospace creator-dropdown-entry ml-3 mr-3" "d-flex align-items-center font-monospace creator-dropdown-entry ms-3 me-3"
} }
> >
{getVerifiedIcon(creator.verified)} {getVerifiedIcon(creator.verified)}
<Link <Link
className="dropdown-item text-monospace creator-dropdown-entry-address" className="dropdown-item font-monospace creator-dropdown-entry-address"
to={clusterPath(`/address/${creator.address}`)} to={clusterPath(`/address/${creator.address}`)}
> >
{creator.address} {creator.address}
</Link> </Link>
<div className="mr-3"> {`${creator.share}%`}</div> <div className="me-3"> {`${creator.share}%`}</div>
</div> </div>
); );
}; };
@ -120,8 +120,8 @@ function getCreatorDropdownItems(creators: Creator[] | null) {
} }
return ( return (
<div className={"dropdown-item text-monospace"}> <div className={"dropdown-item font-monospace"}>
<div className="mr-3">No creators are associated with this NFT.</div> <div className="me-3">No creators are associated with this NFT.</div>
</div> </div>
); );
} }
@ -131,8 +131,8 @@ function getEditionPill(editionInfo: EditionInfo) {
const edition = editionInfo.edition; const edition = editionInfo.edition;
return ( return (
<div className={"d-inline-flex ml-2"}> <div className={"d-inline-flex ms-2"}>
<span className="badge badge-pill badge-dark">{`${ <span className="badge badge-pill bg-dark">{`${
edition && masterEdition edition && masterEdition
? `Edition ${edition.edition.toNumber()} / ${masterEdition.supply.toNumber()}` ? `Edition ${edition.edition.toNumber()} / ${masterEdition.supply.toNumber()}`
: masterEdition : masterEdition
@ -152,7 +152,7 @@ function getSaleTypePill(hasPrimarySaleHappened: boolean) {
return ( return (
<div className={"d-inline-flex align-items-center"}> <div className={"d-inline-flex align-items-center"}>
<span className="badge badge-pill badge-dark">{`${ <span className="badge badge-pill bg-dark">{`${
hasPrimarySaleHappened ? "Secondary Market" : "Primary Market" hasPrimarySaleHappened ? "Secondary Market" : "Primary Market"
}`}</span> }`}</span>
<InfoTooltip <InfoTooltip
@ -167,7 +167,7 @@ function getSaleTypePill(hasPrimarySaleHappened: boolean) {
function getIsMutablePill(isMutable: boolean) { function getIsMutablePill(isMutable: boolean) {
return ( return (
<span className="badge badge-pill badge-dark">{`${ <span className="badge badge-pill bg-dark">{`${
isMutable ? "Mutable" : "Immutable" isMutable ? "Mutable" : "Immutable"
}`}</span> }`}</span>
); );

6
explorer/src/components/account/NonceAccountSection.tsx
View File

@ -30,21 +30,21 @@ export function NonceAccountSection({
<tr> <tr>
<td>Authority</td> <td>Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={nonceAccount.info.authority} alignRight raw link /> <Address pubkey={nonceAccount.info.authority} alignRight raw link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Blockhash</td> <td>Blockhash</td>
<td className="text-lg-right"> <td className="text-lg-end">
<code>{nonceAccount.info.blockhash}</code> <code>{nonceAccount.info.blockhash}</code>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Fee</td> <td>Fee</td>
<td className="text-lg-right"> <td className="text-lg-end">
{nonceAccount.info.feeCalculator.lamportsPerSignature} lamports per {nonceAccount.info.feeCalculator.lamportsPerSignature} lamports per
signature signature
</td> </td>

4
explorer/src/components/account/OwnedTokensCard.tsx
View File

@ -253,9 +253,7 @@ const DisplayDropdown = ({ display, toggle, show }: DropdownProps) => {
> >
{display === "detail" ? "Detailed" : "Summary"} {display === "detail" ? "Detailed" : "Summary"}
</button> </button>
<div <div className={`dropdown-menu-end dropdown-menu${show ? " show" : ""}`}>
className={`dropdown-menu-right dropdown-menu${show ? " show" : ""}`}
>
{DISPLAY_OPTIONS.map((displayOption) => { {DISPLAY_OPTIONS.map((displayOption) => {
return ( return (
<Link <Link

2
explorer/src/components/account/RewardsCard.tsx
View File

@ -113,7 +113,7 @@ export function RewardsCard({ pubkey }: { pubkey: PublicKey }) {
> >
{fetching ? ( {fetching ? (
<> <>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</> </>
) : ( ) : (

4
explorer/src/components/account/SlotHashesCard.tsx
View File

@ -51,10 +51,10 @@ export function SlotHashesCard({
const renderAccountRow = (entry: SlotHashEntry, index: number) => { const renderAccountRow = (entry: SlotHashEntry, index: number) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-1 text-monospace"> <td className="w-1 font-monospace">
<Slot slot={entry.slot} link /> <Slot slot={entry.slot} link />
</td> </td>
<td className="text-monospace">{entry.hash}</td> <td className="font-monospace">{entry.hash}</td>
</tr> </tr>
); );
}; };

30
explorer/src/components/account/StakeAccountSection.tsx
View File

@ -111,7 +111,7 @@ function OverviewCard({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -119,26 +119,26 @@ function OverviewCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase"> <td className="text-lg-end text-uppercase">
<SolBalance lamports={account.lamports || 0} /> <SolBalance lamports={account.lamports || 0} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Rent Reserve (SOL)</td> <td>Rent Reserve (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={stakeAccount.meta.rentExemptReserve} /> <SolBalance lamports={stakeAccount.meta.rentExemptReserve} />
</td> </td>
</tr> </tr>
{hideDelegation && ( {hideDelegation && (
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-lg-right"> <td className="text-lg-end">
{isFullyInactivated(stakeAccount, activation) {isFullyInactivated(stakeAccount, activation)
? "Not delegated" ? "Not delegated"
: displayStatus(stakeAccountType, activation)} : displayStatus(stakeAccountType, activation)}
@ -181,7 +181,7 @@ function DelegationCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-lg-right"> <td className="text-lg-end">
{displayStatus(stakeAccountType, activation)} {displayStatus(stakeAccountType, activation)}
</td> </td>
</tr> </tr>
@ -190,7 +190,7 @@ function DelegationCard({
<> <>
<tr> <tr>
<td>Delegated Stake (SOL)</td> <td>Delegated Stake (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={stake.delegation.stake} /> <SolBalance lamports={stake.delegation.stake} />
</td> </td>
</tr> </tr>
@ -199,14 +199,14 @@ function DelegationCard({
<> <>
<tr> <tr>
<td>Active Stake (SOL)</td> <td>Active Stake (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={activation.active} /> <SolBalance lamports={activation.active} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Inactive Stake (SOL)</td> <td>Inactive Stake (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={activation.inactive} /> <SolBalance lamports={activation.inactive} />
</td> </td>
</tr> </tr>
@ -216,7 +216,7 @@ function DelegationCard({
{voterPubkey && ( {voterPubkey && (
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={voterPubkey} alignRight link /> <Address pubkey={voterPubkey} alignRight link />
</td> </td>
</tr> </tr>
@ -224,7 +224,7 @@ function DelegationCard({
<tr> <tr>
<td>Activation Epoch</td> <td>Activation Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">
{activationEpoch !== undefined ? ( {activationEpoch !== undefined ? (
<Epoch epoch={activationEpoch} link /> <Epoch epoch={activationEpoch} link />
) : ( ) : (
@ -234,7 +234,7 @@ function DelegationCard({
</tr> </tr>
<tr> <tr>
<td>Deactivation Epoch</td> <td>Deactivation Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">
{deactivationEpoch !== undefined ? ( {deactivationEpoch !== undefined ? (
<Epoch epoch={deactivationEpoch} link /> <Epoch epoch={deactivationEpoch} link />
) : ( ) : (
@ -261,14 +261,14 @@ function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={meta.authorized.staker} alignRight link /> <Address pubkey={meta.authorized.staker} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={meta.authorized.withdrawer} alignRight link /> <Address pubkey={meta.authorized.withdrawer} alignRight link />
</td> </td>
</tr> </tr>
@ -276,7 +276,7 @@ function AuthoritiesCard({ meta }: { meta: StakeMeta }) {
{hasLockup && ( {hasLockup && (
<tr> <tr>
<td>Lockup Authority Address</td> <td>Lockup Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={meta.lockup.custodian} alignRight link /> <Address pubkey={meta.lockup.custodian} alignRight link />
</td> </td>
</tr> </tr>

8
explorer/src/components/account/StakeHistoryCard.tsx
View File

@ -56,16 +56,16 @@ export function StakeHistoryCard({
const renderAccountRow = (entry: StakeHistoryEntry, index: number) => { const renderAccountRow = (entry: StakeHistoryEntry, index: number) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-1 text-monospace"> <td className="w-1 font-monospace">
<Epoch epoch={entry.epoch} link /> <Epoch epoch={entry.epoch} link />
</td> </td>
<td className="text-monospace"> <td className="font-monospace">
<SolBalance lamports={entry.stakeHistory.effective} /> <SolBalance lamports={entry.stakeHistory.effective} />
</td> </td>
<td className="text-monospace"> <td className="font-monospace">
<SolBalance lamports={entry.stakeHistory.activating} /> <SolBalance lamports={entry.stakeHistory.activating} />
</td> </td>
<td className="text-monospace"> <td className="font-monospace">
<SolBalance lamports={entry.stakeHistory.deactivating} /> <SolBalance lamports={entry.stakeHistory.deactivating} />
</td> </td>
</tr> </tr>

32
explorer/src/components/account/SysvarAccountSection.tsx
View File

@ -170,7 +170,7 @@ function SysvarAccountSlotHistory({
Slot History{" "} Slot History{" "}
<span className="text-muted">(previous 100 slots)</span> <span className="text-muted">(previous 100 slots)</span>
</td> </td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{history.map((val) => ( {history.map((val) => (
<p key={val} className="mb-0"> <p key={val} className="mb-0">
<Slot slot={val} link /> <Slot slot={val} link />
@ -226,7 +226,7 @@ function SysvarAccountFeesCard({
<tr> <tr>
<td>Lamports Per Signature</td> <td>Lamports Per Signature</td>
<td className="text-lg-right"> <td className="text-lg-end">
{sysvarAccount.info.feeCalculator.lamportsPerSignature} {sysvarAccount.info.feeCalculator.lamportsPerSignature}
</td> </td>
</tr> </tr>
@ -256,33 +256,31 @@ function SysvarAccountEpochScheduleCard({
<tr> <tr>
<td>Slots Per Epoch</td> <td>Slots Per Epoch</td>
<td className="text-lg-right">{sysvarAccount.info.slotsPerEpoch}</td> <td className="text-lg-end">{sysvarAccount.info.slotsPerEpoch}</td>
</tr> </tr>
<tr> <tr>
<td>Leader Schedule Slot Offset</td> <td>Leader Schedule Slot Offset</td>
<td className="text-lg-right"> <td className="text-lg-end">
{sysvarAccount.info.leaderScheduleSlotOffset} {sysvarAccount.info.leaderScheduleSlotOffset}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Epoch Warmup Enabled</td> <td>Epoch Warmup Enabled</td>
<td className="text-lg-right"> <td className="text-lg-end">
<code>{sysvarAccount.info.warmup ? "true" : "false"}</code> <code>{sysvarAccount.info.warmup ? "true" : "false"}</code>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>First Normal Epoch</td> <td>First Normal Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">{sysvarAccount.info.firstNormalEpoch}</td>
{sysvarAccount.info.firstNormalEpoch}
</td>
</tr> </tr>
<tr> <tr>
<td>First Normal Slot</td> <td>First Normal Slot</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Slot slot={sysvarAccount.info.firstNormalSlot} /> <Slot slot={sysvarAccount.info.firstNormalSlot} />
</td> </td>
</tr> </tr>
@ -312,28 +310,28 @@ function SysvarAccountClockCard({
<tr> <tr>
<td>Timestamp</td> <td>Timestamp</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{displayTimestamp(sysvarAccount.info.unixTimestamp * 1000)} {displayTimestamp(sysvarAccount.info.unixTimestamp * 1000)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Epoch</td> <td>Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Epoch epoch={sysvarAccount.info.epoch} link /> <Epoch epoch={sysvarAccount.info.epoch} link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Leader Schedule Epoch</td> <td>Leader Schedule Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Epoch epoch={sysvarAccount.info.leaderScheduleEpoch} link /> <Epoch epoch={sysvarAccount.info.leaderScheduleEpoch} link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Slot</td> <td>Slot</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Slot slot={sysvarAccount.info.slot} link /> <Slot slot={sysvarAccount.info.slot} link />
</td> </td>
</tr> </tr>
@ -363,21 +361,21 @@ function SysvarAccountRentCard({
<tr> <tr>
<td>Burn Percent</td> <td>Burn Percent</td>
<td className="text-lg-right"> <td className="text-lg-end">
{sysvarAccount.info.burnPercent + "%"} {sysvarAccount.info.burnPercent + "%"}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Exemption Threshold</td> <td>Exemption Threshold</td>
<td className="text-lg-right"> <td className="text-lg-end">
{sysvarAccount.info.exemptionThreshold} years {sysvarAccount.info.exemptionThreshold} years
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Lamports Per Byte Year</td> <td>Lamports Per Byte Year</td>
<td className="text-lg-right"> <td className="text-lg-end">
{sysvarAccount.info.lamportsPerByteYear} {sysvarAccount.info.lamportsPerByteYear}
</td> </td>
</tr> </tr>
@ -412,7 +410,7 @@ function SysvarAccountRewardsCard({
<tr> <tr>
<td>Validator Point Value</td> <td>Validator Point Value</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{validatorPointValueFormatted} lamports {validatorPointValueFormatted} lamports
</td> </td>
</tr> </tr>

70
explorer/src/components/account/TokenAccountSection.tsx
View File

@ -130,7 +130,7 @@ function FungibleTokenMintAccountCard({
<h4> <h4>
Price{" "} Price{" "}
{tokenPriceInfo.market_cap_rank && ( {tokenPriceInfo.market_cap_rank && (
<span className="ml-2 badge badge-primary rank"> <span className="ms-2 badge bg-primary rank">
Rank #{tokenPriceInfo.market_cap_rank} Rank #{tokenPriceInfo.market_cap_rank}
</span> </span>
)} )}
@ -190,14 +190,14 @@ function FungibleTokenMintAccountCard({
{tokenInfo ? "Overview" : "Token Mint"} {tokenInfo ? "Overview" : "Token Mint"}
</h3> </h3>
<button className="btn btn-white btn-sm" onClick={refresh}> <button className="btn btn-white btn-sm" onClick={refresh}>
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
@ -205,7 +205,7 @@ function FungibleTokenMintAccountCard({
<td> <td>
{info.mintAuthority === null ? "Fixed Supply" : "Current Supply"} {info.mintAuthority === null ? "Fixed Supply" : "Current Supply"}
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
{normalizeTokenAmount(info.supply, info.decimals).toLocaleString( {normalizeTokenAmount(info.supply, info.decimals).toLocaleString(
"en-US", "en-US",
{ {
@ -217,14 +217,14 @@ function FungibleTokenMintAccountCard({
{tokenInfo?.extensions?.website && ( {tokenInfo?.extensions?.website && (
<tr> <tr>
<td>Website</td> <td>Website</td>
<td className="text-lg-right"> <td className="text-lg-end">
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
href={tokenInfo.extensions.website} href={tokenInfo.extensions.website}
> >
{tokenInfo.extensions.website} {tokenInfo.extensions.website}
<span className="fe fe-external-link ml-2"></span> <span className="fe fe-external-link ms-2"></span>
</a> </a>
</td> </td>
</tr> </tr>
@ -232,7 +232,7 @@ function FungibleTokenMintAccountCard({
{info.mintAuthority && ( {info.mintAuthority && (
<tr> <tr>
<td>Mint Authority</td> <td>Mint Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mintAuthority} alignRight link /> <Address pubkey={info.mintAuthority} alignRight link />
</td> </td>
</tr> </tr>
@ -240,25 +240,25 @@ function FungibleTokenMintAccountCard({
{info.freezeAuthority && ( {info.freezeAuthority && (
<tr> <tr>
<td>Freeze Authority</td> <td>Freeze Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.freezeAuthority} alignRight link /> <Address pubkey={info.freezeAuthority} alignRight link />
</td> </td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Decimals</td> <td>Decimals</td>
<td className="text-lg-right">{info.decimals}</td> <td className="text-lg-end">{info.decimals}</td>
</tr> </tr>
{!info.isInitialized && ( {!info.isInitialized && (
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-lg-right">Uninitialized</td> <td className="text-lg-end">Uninitialized</td>
</tr> </tr>
)} )}
{tokenInfo?.extensions?.bridgeContract && bridgeContractAddress && ( {tokenInfo?.extensions?.bridgeContract && bridgeContractAddress && (
<tr> <tr>
<td>Bridge Contract</td> <td>Bridge Contract</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Copyable text={bridgeContractAddress}> <Copyable text={bridgeContractAddress}>
<a <a
href={tokenInfo.extensions.bridgeContract} href={tokenInfo.extensions.bridgeContract}
@ -274,7 +274,7 @@ function FungibleTokenMintAccountCard({
{tokenInfo?.extensions?.assetContract && assetContractAddress && ( {tokenInfo?.extensions?.assetContract && assetContractAddress && (
<tr> <tr>
<td>Bridged Asset Contract</td> <td>Bridged Asset Contract</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Copyable text={assetContractAddress}> <Copyable text={assetContractAddress}>
<a <a
href={tokenInfo.extensions.bridgeContract} href={tokenInfo.extensions.bridgeContract}
@ -312,21 +312,21 @@ function NonFungibleTokenMintAccountCard({
Overview Overview
</h3> </h3>
<button className="btn btn-white btn-sm" onClick={refresh}> <button className="btn btn-white btn-sm" onClick={refresh}>
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
{nftData.editionInfo.masterEdition?.maxSupply && ( {nftData.editionInfo.masterEdition?.maxSupply && (
<tr> <tr>
<td>Max Total Supply</td> <td>Max Total Supply</td>
<td className="text-lg-right"> <td className="text-lg-end">
{nftData.editionInfo.masterEdition.maxSupply.toNumber() === 0 {nftData.editionInfo.masterEdition.maxSupply.toNumber() === 0
? 1 ? 1
: nftData.editionInfo.masterEdition.maxSupply.toNumber()} : nftData.editionInfo.masterEdition.maxSupply.toNumber()}
@ -336,7 +336,7 @@ function NonFungibleTokenMintAccountCard({
{nftData?.editionInfo.masterEdition?.supply && ( {nftData?.editionInfo.masterEdition?.supply && (
<tr> <tr>
<td>Current Supply</td> <td>Current Supply</td>
<td className="text-lg-right"> <td className="text-lg-end">
{nftData.editionInfo.masterEdition.supply.toNumber() === 0 {nftData.editionInfo.masterEdition.supply.toNumber() === 0
? 1 ? 1
: nftData.editionInfo.masterEdition.supply.toNumber()} : nftData.editionInfo.masterEdition.supply.toNumber()}
@ -346,14 +346,14 @@ function NonFungibleTokenMintAccountCard({
{mintInfo.mintAuthority && ( {mintInfo.mintAuthority && (
<tr> <tr>
<td>Mint Authority</td> <td>Mint Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={mintInfo.mintAuthority} alignRight link /> <Address pubkey={mintInfo.mintAuthority} alignRight link />
</td> </td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Update Authority</td> <td>Update Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={new PublicKey(nftData.metadata.updateAuthority)} pubkey={new PublicKey(nftData.metadata.updateAuthority)}
alignRight alignRight
@ -364,7 +364,7 @@ function NonFungibleTokenMintAccountCard({
{nftData?.metadata.data && ( {nftData?.metadata.data && (
<tr> <tr>
<td>Seller Fee</td> <td>Seller Fee</td>
<td className="text-lg-right"> <td className="text-lg-end">
{`${nftData?.metadata.data.sellerFeeBasisPoints / 100}%`} {`${nftData?.metadata.data.sellerFeeBasisPoints / 100}%`}
</td> </td>
</tr> </tr>
@ -392,7 +392,7 @@ function TokenAccountCard({
balance = ( balance = (
<> <>
◎ ◎
<span className="text-monospace"> <span className="font-monospace">
{new BigNumber(info.tokenAmount.uiAmountString).toFormat(9)} {new BigNumber(info.tokenAmount.uiAmountString).toFormat(9)}
</span> </span>
</> </>
@ -412,7 +412,7 @@ function TokenAccountCard({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -420,45 +420,45 @@ function TokenAccountCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
{label && ( {label && (
<tr> <tr>
<td>Address Label</td> <td>Address Label</td>
<td className="text-lg-right">{label}</td> <td className="text-lg-end">{label}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Mint</td> <td>Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mint} alignRight link /> <Address pubkey={info.mint} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Owner</td> <td>Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.owner} alignRight link /> <Address pubkey={info.owner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Token balance ({unit})</td> <td>Token balance ({unit})</td>
<td className="text-lg-right">{balance}</td> <td className="text-lg-end">{balance}</td>
</tr> </tr>
{info.state === "uninitialized" && ( {info.state === "uninitialized" && (
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-lg-right">Uninitialized</td> <td className="text-lg-end">Uninitialized</td>
</tr> </tr>
)} )}
{info.rentExemptReserve && ( {info.rentExemptReserve && (
<tr> <tr>
<td>Rent-exempt reserve (SOL)</td> <td>Rent-exempt reserve (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<> <>
◎ ◎
<span className="text-monospace"> <span className="font-monospace">
{new BigNumber( {new BigNumber(
info.rentExemptReserve.uiAmountString info.rentExemptReserve.uiAmountString
).toFormat(9)} ).toFormat(9)}
@ -491,7 +491,7 @@ function MultisigAccountCard({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -499,22 +499,22 @@ function MultisigAccountCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Required Signers</td> <td>Required Signers</td>
<td className="text-lg-right">{info.numRequiredSigners}</td> <td className="text-lg-end">{info.numRequiredSigners}</td>
</tr> </tr>
<tr> <tr>
<td>Valid Signers</td> <td>Valid Signers</td>
<td className="text-lg-right">{info.numValidSigners}</td> <td className="text-lg-end">{info.numValidSigners}</td>
</tr> </tr>
{info.signers.map((signer) => ( {info.signers.map((signer) => (
<tr key={signer.toString()}> <tr key={signer.toString()}>
<td>Signer</td> <td>Signer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={signer} alignRight link /> <Address pubkey={signer} alignRight link />
</td> </td>
</tr> </tr>
@ -522,7 +522,7 @@ function MultisigAccountCard({
{!info.isInitialized && ( {!info.isInitialized && (
<tr> <tr>
<td>Status</td> <td>Status</td>
<td className="text-lg-right">Uninitialized</td> <td className="text-lg-end">Uninitialized</td>
</tr> </tr>
)} )}
</TableCardBody> </TableCardBody>

22
explorer/src/components/account/TokenHistoryCard.tsx
View File

@ -242,12 +242,12 @@ function TokenHistoryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
> >
{fetching ? ( {fetching ? (
<> <>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</> </>
) : ( ) : (
<> <>
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</> </>
)} )}
@ -289,7 +289,7 @@ function TokenHistoryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
> >
{fetching ? ( {fetching ? (
<> <>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</> </>
) : ( ) : (
@ -331,8 +331,8 @@ const FilterDropdown = ({ filter, toggle, show, tokens }: FilterProps) => {
}); });
return ( return (
<div className="dropdown mr-2"> <div className="dropdown me-2">
<small className="mr-2">Filter:</small> <small className="me-2">Filter:</small>
<button <button
className="btn btn-white btn-sm dropdown-toggle" className="btn btn-white btn-sm dropdown-toggle"
type="button" type="button"
@ -341,7 +341,7 @@ const FilterDropdown = ({ filter, toggle, show, tokens }: FilterProps) => {
{filter === ALL_TOKENS ? "All Tokens" : nameLookup.get(filter)} {filter === ALL_TOKENS ? "All Tokens" : nameLookup.get(filter)}
</button> </button>
<div <div
className={`token-filter dropdown-menu-right dropdown-menu${ className={`token-filter dropdown-menu-end dropdown-menu${
show ? " show" : "" show ? " show" : ""
}`} }`}
> >
@ -404,9 +404,7 @@ const TokenTransactionRow = React.memo(
</td> </td>
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
{statusText}
</span>
</td> </td>
<td> <td>
@ -414,7 +412,7 @@ const TokenTransactionRow = React.memo(
</td> </td>
<td> <td>
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
Loading Loading
</td> </td>
@ -546,7 +544,7 @@ const TokenTransactionRow = React.memo(
</td> </td>
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>
{statusText} {statusText}
</span> </span>
</td> </td>
@ -597,7 +595,7 @@ function InstructionDetails({
e.preventDefault(); e.preventDefault();
setExpanded(!expanded); setExpanded(!expanded);
}} }}
className={`c-pointer fe mr-2 ${ className={`c-pointer fe me-2 ${
expanded ? "fe-minus-square" : "fe-plus-square" expanded ? "fe-minus-square" : "fe-plus-square"
}`} }`}
></span> ></span>

10
explorer/src/components/account/TokenLargestAccountsCard.tsx
View File

@ -91,8 +91,8 @@ export function TokenLargestAccountsCard({ pubkey }: { pubkey: PublicKey }) {
<th className="text-muted">Rank</th> <th className="text-muted">Rank</th>
<th className="text-muted">Address</th> <th className="text-muted">Address</th>
<th className="text-muted">Owner</th> <th className="text-muted">Owner</th>
<th className="text-muted text-right">Balance {unitLabel}</th> <th className="text-muted text-end">Balance {unitLabel}</th>
<th className="text-muted text-right">% of Total Supply</th> <th className="text-muted text-end">% of Total Supply</th>
</tr> </tr>
</thead> </thead>
<tbody className="list"> <tbody className="list">
@ -131,7 +131,7 @@ const renderAccountRow = (
return ( return (
<tr key={index}> <tr key={index}>
<td> <td>
<span className="badge badge-soft-gray badge-pill">{index + 1}</span> <span className="badge bg-gray-soft badge-pill">{index + 1}</span>
</td> </td>
<td className="td"> <td className="td">
<Address pubkey={account.address} link truncate /> <Address pubkey={account.address} link truncate />
@ -139,11 +139,11 @@ const renderAccountRow = (
<td> <td>
{account.owner && <Address pubkey={account.owner} link truncate />} {account.owner && <Address pubkey={account.owner} link truncate />}
</td> </td>
<td className="text-right text-monospace"> <td className="text-end font-monospace">
{account.uiAmountString && {account.uiAmountString &&
new BigNumber(account.uiAmountString).toFormat(balanceFixedPoint)} new BigNumber(account.uiAmountString).toFormat(balanceFixedPoint)}
</td> </td>
<td className="text-right text-monospace">{percent}</td> <td className="text-end font-monospace">{percent}</td>
</tr> </tr>
); );
}; };

14
explorer/src/components/account/UnknownAccountCard.tsx
View File

@ -23,19 +23,19 @@ export function UnknownAccountCard({ account }: { account: Account }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
{label && ( {label && (
<tr> <tr>
<td>Address Label</td> <td>Address Label</td>
<td className="text-lg-right">{label}</td> <td className="text-lg-end">{label}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={lamports} /> <SolBalance lamports={lamports} />
</td> </td>
</tr> </tr>
@ -43,14 +43,14 @@ export function UnknownAccountCard({ account }: { account: Account }) {
{details?.space !== undefined && ( {details?.space !== undefined && (
<tr> <tr>
<td>Allocated Data Size</td> <td>Allocated Data Size</td>
<td className="text-lg-right">{details.space} byte(s)</td> <td className="text-lg-end">{details.space} byte(s)</td>
</tr> </tr>
)} )}
{details && ( {details && (
<tr> <tr>
<td>Assigned Program Id</td> <td>Assigned Program Id</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={details.owner} alignRight link /> <Address pubkey={details.owner} alignRight link />
</td> </td>
</tr> </tr>
@ -59,9 +59,7 @@ export function UnknownAccountCard({ account }: { account: Account }) {
{details && ( {details && (
<tr> <tr>
<td>Executable</td> <td>Executable</td>
<td className="text-lg-right"> <td className="text-lg-end">{details.executable ? "Yes" : "No"}</td>
{details.executable ? "Yes" : "No"}
</td>
</tr> </tr>
)} )}
</TableCardBody> </TableCardBody>

44
explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
View File

@ -81,7 +81,7 @@ export function UpgradeableProgramSection({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -89,48 +89,48 @@ export function UpgradeableProgramSection({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
{label && ( {label && (
<tr> <tr>
<td>Address Label</td> <td>Address Label</td>
<td className="text-lg-right">{label}</td> <td className="text-lg-end">{label}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase"> <td className="text-lg-end text-uppercase">
<SolBalance lamports={account.lamports || 0} /> <SolBalance lamports={account.lamports || 0} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Executable</td> <td>Executable</td>
<td className="text-lg-right">Yes</td> <td className="text-lg-end">Yes</td>
</tr> </tr>
<tr> <tr>
<td>Executable Data</td> <td>Executable Data</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={programAccount.programData} alignRight link /> <Address pubkey={programAccount.programData} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Upgradeable</td> <td>Upgradeable</td>
<td className="text-lg-right"> <td className="text-lg-end">
{programData.authority !== null ? "Yes" : "No"} {programData.authority !== null ? "Yes" : "No"}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Last Deployed Slot</td> <td>Last Deployed Slot</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Slot slot={programData.slot} link /> <Slot slot={programData.slot} link />
</td> </td>
</tr> </tr>
{programData.authority !== null && ( {programData.authority !== null && (
<tr> <tr>
<td>Upgrade Authority</td> <td>Upgrade Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={programData.authority} alignRight link /> <Address pubkey={programData.authority} alignRight link />
</td> </td>
</tr> </tr>
@ -158,7 +158,7 @@ export function UpgradeableProgramDataSection({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -166,38 +166,38 @@ export function UpgradeableProgramDataSection({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase"> <td className="text-lg-end text-uppercase">
<SolBalance lamports={account.lamports || 0} /> <SolBalance lamports={account.lamports || 0} />
</td> </td>
</tr> </tr>
{account.details?.space !== undefined && ( {account.details?.space !== undefined && (
<tr> <tr>
<td>Data (Bytes)</td> <td>Data (Bytes)</td>
<td className="text-lg-right">{account.details.space}</td> <td className="text-lg-end">{account.details.space}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Upgradeable</td> <td>Upgradeable</td>
<td className="text-lg-right"> <td className="text-lg-end">
{programData.authority !== null ? "Yes" : "No"} {programData.authority !== null ? "Yes" : "No"}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Last Deployed Slot</td> <td>Last Deployed Slot</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Slot slot={programData.slot} link /> <Slot slot={programData.slot} link />
</td> </td>
</tr> </tr>
{programData.authority !== null && ( {programData.authority !== null && (
<tr> <tr>
<td>Upgrade Authority</td> <td>Upgrade Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={programData.authority} alignRight link /> <Address pubkey={programData.authority} alignRight link />
</td> </td>
</tr> </tr>
@ -225,7 +225,7 @@ export function UpgradeableProgramBufferSection({
className="btn btn-white btn-sm" className="btn btn-white btn-sm"
onClick={() => refresh(account.pubkey)} onClick={() => refresh(account.pubkey)}
> >
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -233,26 +233,26 @@ export function UpgradeableProgramBufferSection({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase"> <td className="text-lg-end text-uppercase">
<SolBalance lamports={account.lamports || 0} /> <SolBalance lamports={account.lamports || 0} />
</td> </td>
</tr> </tr>
{account.details?.space !== undefined && ( {account.details?.space !== undefined && (
<tr> <tr>
<td>Data (Bytes)</td> <td>Data (Bytes)</td>
<td className="text-lg-right">{account.details.space}</td> <td className="text-lg-end">{account.details.space}</td>
</tr> </tr>
)} )}
{programBuffer.authority !== null && ( {programBuffer.authority !== null && (
<tr> <tr>
<td>Deploy Authority</td> <td>Deploy Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={programBuffer.authority} alignRight link /> <Address pubkey={programBuffer.authority} alignRight link />
</td> </td>
</tr> </tr>
@ -260,7 +260,7 @@ export function UpgradeableProgramBufferSection({
{account.details && ( {account.details && (
<tr> <tr>
<td>Owner</td> <td>Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.details.owner} alignRight link /> <Address pubkey={account.details.owner} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/account/VoteAccountSection.tsx
View File

@ -36,7 +36,7 @@ export function VoteAccountSection({
Authorized Voter Authorized Voter
{voteAccount.info.authorizedVoters.length > 1 ? "s" : ""} {voteAccount.info.authorizedVoters.length > 1 ? "s" : ""}
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
{voteAccount.info.authorizedVoters.map((voter) => { {voteAccount.info.authorizedVoters.map((voter) => {
return ( return (
<Address <Address
@ -53,7 +53,7 @@ export function VoteAccountSection({
<tr> <tr>
<td>Authorized Withdrawer</td> <td>Authorized Withdrawer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={voteAccount.info.authorizedWithdrawer} pubkey={voteAccount.info.authorizedWithdrawer}
alignRight alignRight
@ -65,19 +65,19 @@ export function VoteAccountSection({
<tr> <tr>
<td>Last Timestamp</td> <td>Last Timestamp</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{displayTimestamp(voteAccount.info.lastTimestamp.timestamp * 1000)} {displayTimestamp(voteAccount.info.lastTimestamp.timestamp * 1000)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Commission</td> <td>Commission</td>
<td className="text-lg-right">{voteAccount.info.commission + "%"}</td> <td className="text-lg-end">{voteAccount.info.commission + "%"}</td>
</tr> </tr>
<tr> <tr>
<td>Root Slot</td> <td>Root Slot</td>
<td className="text-lg-right"> <td className="text-lg-end">
{rootSlot !== null ? <Slot slot={rootSlot} link /> : "N/A"} {rootSlot !== null ? <Slot slot={rootSlot} link /> : "N/A"}
</td> </td>
</tr> </tr>

4
explorer/src/components/account/VotesCard.tsx
View File

@ -44,10 +44,10 @@ export function VotesCard({ voteAccount }: { voteAccount: VoteAccount }) {
const renderAccountRow = (vote: Vote, index: number) => { const renderAccountRow = (vote: Vote, index: number) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-1 text-monospace"> <td className="w-1 font-monospace">
<Slot slot={vote.slot} link /> <Slot slot={vote.slot} link />
</td> </td>
<td className="text-monospace">{vote.confirmationCount}</td> <td className="font-monospace">{vote.confirmationCount}</td>
</tr> </tr>
); );
}; };

2
explorer/src/components/account/history/TokenInstructionsCard.tsx
View File

@ -109,7 +109,7 @@ export function TokenInstructionsCard({ pubkey }: { pubkey: PublicKey }) {
</td> </td>
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>
{statusText} {statusText}
</span> </span>
</td> </td>

2
explorer/src/components/account/history/TokenTransfersCard.tsx
View File

@ -185,7 +185,7 @@ export function TokenTransfersCard({ pubkey }: { pubkey: PublicKey }) {
</td> </td>
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>
{statusText} {statusText}
</span> </span>
</td> </td>

4
explorer/src/components/account/history/TransactionHistoryCard.tsx
View File

@ -70,9 +70,7 @@ export function TransactionHistoryCard({ pubkey }: { pubkey: PublicKey }) {
)} )}
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
{statusText}
</span>
</td> </td>
</tr> </tr>
); );

8
explorer/src/components/block/BlockHistoryCard.tsx
View File

@ -151,7 +151,7 @@ export function BlockHistoryCard({ block }: { block: BlockResponse }) {
<tr key={i}> <tr key={i}>
<td>{tx.index + 1}</td> <td>{tx.index + 1}</td>
<td> <td>
<span className={`badge badge-soft-${statusClass}`}> <span className={`badge bg-${statusClass}-soft`}>
{statusText} {statusText}
</span> </span>
</td> </td>
@ -164,7 +164,7 @@ export function BlockHistoryCard({ block }: { block: BlockResponse }) {
return ( return (
<div key={i} className="d-flex align-items-center"> <div key={i} className="d-flex align-items-center">
<Address pubkey={new PublicKey(programId)} link /> <Address pubkey={new PublicKey(programId)} link />
<span className="ml-2 text-muted">{`(${count})`}</span> <span className="ms-2 text-muted">{`(${count})`}</span>
</div> </div>
); );
})} })}
@ -252,7 +252,7 @@ const FilterDropdown = ({
filterOptions.sort(); filterOptions.sort();
return ( return (
<div className="dropdown mr-2"> <div className="dropdown me-2">
<button <button
className="btn btn-white btn-sm dropdown-toggle" className="btn btn-white btn-sm dropdown-toggle"
type="button" type="button"
@ -261,7 +261,7 @@ const FilterDropdown = ({
{currentFilterOption.name} {currentFilterOption.name}
</button> </button>
<div <div
className={`token-filter dropdown-menu-right dropdown-menu${ className={`token-filter dropdown-menu-end dropdown-menu${
show ? " show" : "" show ? " show" : ""
}`} }`}
> >

30
explorer/src/components/block/BlockOverviewCard.tsx
View File

@ -24,7 +24,7 @@ export function BlockOverviewCard({
}) { }) {
const confirmedBlock = useBlock(slot); const confirmedBlock = useBlock(slot);
const fetchBlock = useFetchBlock(); const fetchBlock = useFetchBlock();
const { epochSchedule, status } = useCluster(); const { clusterInfo, status } = useCluster();
const refresh = () => fetchBlock(slot); const refresh = () => fetchBlock(slot);
// Fetch block on load // Fetch block on load
@ -45,7 +45,7 @@ export function BlockOverviewCard({
const block = confirmedBlock.data.block; const block = confirmedBlock.data.block;
const committedTxs = block.transactions.filter((tx) => tx.meta?.err === null); const committedTxs = block.transactions.filter((tx) => tx.meta?.err === null);
const epoch = epochSchedule?.getEpoch(slot); const epoch = clusterInfo?.epochSchedule.getEpoch(slot);
return ( return (
<> <>
@ -58,13 +58,13 @@ export function BlockOverviewCard({
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Slot</td> <td className="w-100">Slot</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<Slot slot={slot} /> <Slot slot={slot} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Blockhash</td> <td className="w-100">Blockhash</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<span>{block.blockhash}</span> <span>{block.blockhash}</span>
</td> </td>
</tr> </tr>
@ -72,16 +72,16 @@ export function BlockOverviewCard({
<> <>
<tr> <tr>
<td>Timestamp (Local)</td> <td>Timestamp (Local)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<span className="text-monospace"> <span className="font-monospace">
{displayTimestamp(block.blockTime * 1000, true)} {displayTimestamp(block.blockTime * 1000, true)}
</span> </span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Timestamp (UTC)</td> <td>Timestamp (UTC)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<span className="text-monospace"> <span className="font-monospace">
{displayTimestampUtc(block.blockTime * 1000, true)} {displayTimestampUtc(block.blockTime * 1000, true)}
</span> </span>
</td> </td>
@ -90,46 +90,46 @@ export function BlockOverviewCard({
) : ( ) : (
<tr> <tr>
<td className="w-100">Timestamp</td> <td className="w-100">Timestamp</td>
<td className="text-lg-right">Unavailable</td> <td className="text-lg-end">Unavailable</td>
</tr> </tr>
)} )}
<tr> <tr>
<td className="w-100">Parent Slot</td> <td className="w-100">Parent Slot</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<Slot slot={block.parentSlot} link /> <Slot slot={block.parentSlot} link />
</td> </td>
</tr> </tr>
{epoch !== undefined && ( {epoch !== undefined && (
<tr> <tr>
<td className="w-100">Epoch</td> <td className="w-100">Epoch</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<Epoch epoch={epoch} link /> <Epoch epoch={epoch} link />
</td> </td>
</tr> </tr>
)} )}
<tr> <tr>
<td className="w-100">Parent Blockhash</td> <td className="w-100">Parent Blockhash</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<span>{block.previousBlockhash}</span> <span>{block.previousBlockhash}</span>
</td> </td>
</tr> </tr>
{confirmedBlock.data.child && ( {confirmedBlock.data.child && (
<tr> <tr>
<td className="w-100">Child Slot</td> <td className="w-100">Child Slot</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<Slot slot={confirmedBlock.data.child} link /> <Slot slot={confirmedBlock.data.child} link />
</td> </td>
</tr> </tr>
)} )}
<tr> <tr>
<td className="w-100">Processed Transactions</td> <td className="w-100">Processed Transactions</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<span>{block.transactions.length}</span> <span>{block.transactions.length}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Successful Transactions</td> <td className="w-100">Successful Transactions</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
<span>{committedTxs.length}</span> <span>{committedTxs.length}</span>
</td> </td>
</tr> </tr>

6
explorer/src/components/block/BlockProgramsCard.tsx
View File

@ -62,15 +62,13 @@ export function BlockProgramsCard({ block }: { block: BlockResponse }) {
<TableCardBody> <TableCardBody>
<tr> <tr>
<td className="w-100">Unique Programs Count</td> <td className="w-100">Unique Programs Count</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{programEntries.length} {programEntries.length}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="w-100">Total Instructions</td> <td className="w-100">Total Instructions</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">{totalInstructions}</td>
{totalInstructions}
</td>
</tr> </tr>
</TableCardBody> </TableCardBody>
</div> </div>

6
explorer/src/components/common/Account.tsx
View File

@ -17,7 +17,7 @@ export function AccountHeader({ title, refresh }: AccountHeaderProps) {
<div className="card-header align-items-center"> <div className="card-header align-items-center">
<h3 className="card-header-title">{title}</h3> <h3 className="card-header-title">{title}</h3>
<button className="btn btn-white btn-sm" onClick={() => refresh()}> <button className="btn btn-white btn-sm" onClick={() => refresh()}>
<span className="fe fe-refresh-cw mr-2"></span> <span className="fe fe-refresh-cw me-2"></span>
Refresh Refresh
</button> </button>
</div> </div>
@ -28,7 +28,7 @@ export function AccountAddressRow({ account }: AccountProps) {
return ( return (
<tr> <tr>
<td>Address</td> <td>Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw /> <Address pubkey={account.pubkey} alignRight raw />
</td> </td>
</tr> </tr>
@ -40,7 +40,7 @@ export function AccountBalanceRow({ account }: AccountProps) {
return ( return (
<tr> <tr>
<td>Balance (SOL)</td> <td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase"> <td className="text-lg-end text-uppercase">
<SolBalance lamports={lamports} /> <SolBalance lamports={lamports} />
</td> </td>
</tr> </tr>

2
explorer/src/components/common/Address.tsx
View File

@ -47,7 +47,7 @@ export function Address({
const content = ( const content = (
<Copyable text={address} replaceText={!alignRight}> <Copyable text={address} replaceText={!alignRight}>
<span className="text-monospace"> <span className="font-monospace">
{link ? ( {link ? (
<Link <Link
className={truncate ? "text-truncate address-truncate" : ""} className={truncate ? "text-truncate address-truncate" : ""}

6
explorer/src/components/common/BalanceDelta.tsx
View File

@ -17,17 +17,17 @@ export function BalanceDelta({
if (delta.gt(0)) { if (delta.gt(0)) {
return ( return (
<span className="badge badge-soft-success"> <span className="badge bg-success-soft">
+{isSol ? sols : delta.toString()} +{isSol ? sols : delta.toString()}
</span> </span>
); );
} else if (delta.lt(0)) { } else if (delta.lt(0)) {
return ( return (
<span className="badge badge-soft-warning"> <span className="badge bg-warning-soft">
{isSol ? <>-{sols}</> : delta.toString()} {isSol ? <>-{sols}</> : delta.toString()}
</span> </span>
); );
} }
return <span className="badge badge-soft-secondary">0</span>; return <span className="badge bg-secondary-soft">0</span>;
} }

6
explorer/src/components/common/Copyable.tsx
View File

@ -54,9 +54,9 @@ export function Copyable({
function PrependCopyIcon() { function PrependCopyIcon() {
return ( return (
<> <>
<span className="font-size-tiny mr-2"> <span className="font-size-tiny me-2">
<span className={textColor}> <span className={textColor}>
{message !== undefined && <span className="mr-2">{message}</span>} {message !== undefined && <span className="me-2">{message}</span>}
<CopyIcon /> <CopyIcon />
</span> </span>
</span> </span>
@ -71,7 +71,7 @@ export function Copyable({
<span className="font-size-tiny"> <span className="font-size-tiny">
<span className={textColor}> <span className={textColor}>
<CopyIcon /> <CopyIcon />
<span className="ml-2">{message}</span> <span className="ms-2">{message}</span>
</span> </span>
</span> </span>
<span className="v-hidden">{children}</span> <span className="v-hidden">{children}</span>

2
explorer/src/components/common/Epoch.tsx
View File

@ -9,7 +9,7 @@ type Props = {
}; };
export function Epoch({ epoch, link }: Props) { export function Epoch({ epoch, link }: Props) {
return ( return (
<span className="text-monospace"> <span className="font-monospace">
{link ? ( {link ? (
<Copyable text={epoch.toString()}> <Copyable text={epoch.toString()}>
<Link to={clusterPath(`/epoch/${epoch}`)}> <Link to={clusterPath(`/epoch/${epoch}`)}>

2
explorer/src/components/common/ErrorCard.tsx
View File

@ -19,7 +19,7 @@ export function ErrorCard({
{retry && ( {retry && (
<> <>
<span <span
className="btn btn-white ml-3 d-none d-md-inline" className="btn btn-white ms-3 d-none d-md-inline"
onClick={retry} onClick={retry}
> >
{buttonText} {buttonText}

2
explorer/src/components/common/HexData.tsx
View File

@ -40,7 +40,7 @@ export function HexData({ raw }: { raw: Buffer }) {
function Content() { function Content() {
return ( return (
<Copyable text={hexString}> <Copyable text={hexString}>
<pre className="d-inline-block text-left mb-0">{divs}</pre> <pre className="d-inline-block text-start mb-0">{divs}</pre>
</Copyable> </Copyable>
); );
} }

2
explorer/src/components/common/InfoTooltip.tsx
View File

@ -45,7 +45,7 @@ export function InfoTooltip({ bottom, right, text, children }: Props) {
> >
<div className={`d-flex align-items-center justify-content-${justify}`}> <div className={`d-flex align-items-center justify-content-${justify}`}>
{children} {children}
<span className="fe fe-help-circle ml-2"></span> <span className="fe fe-help-circle ms-2"></span>
</div> </div>
<Popover bottom={bottom} right={right} state={state} text={text} /> <Popover bottom={bottom} right={right} state={state} text={text} />
</div> </div>

2
explorer/src/components/common/InstructionDetails.tsx
View File

@ -32,7 +32,7 @@ export function InstructionDetails({
e.preventDefault(); e.preventDefault();
setExpanded(!expanded); setExpanded(!expanded);
}} }}
className={`c-pointer fe mr-2 ${ className={`c-pointer fe me-2 ${
expanded ? "fe-minus-square" : "fe-plus-square" expanded ? "fe-minus-square" : "fe-plus-square"
}`} }`}
></span> ></span>

2
explorer/src/components/common/LoadingCard.tsx
View File

@ -4,7 +4,7 @@ export function LoadingCard({ message }: { message?: string }) {
return ( return (
<div className="card"> <div className="card">
<div className="card-body text-center"> <div className="card-body text-center">
<span className="spinner-grow spinner-grow-sm mr-2"></span> <span className="spinner-grow spinner-grow-sm me-2"></span>
{message || "Loading"} {message || "Loading"}
</div> </div>
</div> </div>

8
explorer/src/components/common/Overlay.tsx
View File

@ -5,5 +5,11 @@ type OverlayProps = {
}; };
export function Overlay({ show }: OverlayProps) { export function Overlay({ show }: OverlayProps) {
return <div className={`modal-backdrop fade${show ? " show" : ""}`}></div>; return (
<div
className={`modal-backdrop fade ${
show ? "show" : "disable-pointer-events"
}`}
></div>
);
} }

2
explorer/src/components/common/Signature.tsx
View File

@ -32,7 +32,7 @@ export function Signature({
}`} }`}
> >
<Copyable text={signature} replaceText={!alignRight}> <Copyable text={signature} replaceText={!alignRight}>
<span className="text-monospace"> <span className="font-monospace">
{link ? ( {link ? (
<Link <Link
className={truncate ? "text-truncate signature-truncate" : ""} className={truncate ? "text-truncate signature-truncate" : ""}

2
explorer/src/components/common/Slot.tsx
View File

@ -9,7 +9,7 @@ type Props = {
}; };
export function Slot({ slot, link }: Props) { export function Slot({ slot, link }: Props) {
return ( return (
<span className="text-monospace"> <span className="font-monospace">
{link ? ( {link ? (
<Copyable text={slot.toString()}> <Copyable text={slot.toString()}>
<Link to={clusterPath(`/block/${slot}`)}> <Link to={clusterPath(`/block/${slot}`)}>

8
explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx
View File

@ -28,28 +28,28 @@ export function AssociatedTokenDetailsCard({
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link /> <Address pubkey={ix.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account</td> <td>Account</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={new PublicKey(info.account)} alignRight link /> <Address pubkey={new PublicKey(info.account)} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Mint</td> <td>Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={new PublicKey(info.mint)} alignRight link /> <Address pubkey={new PublicKey(info.mint)} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Wallet</td> <td>Wallet</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={new PublicKey(info.wallet)} alignRight link /> <Address pubkey={new PublicKey(info.wallet)} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/InstructionCard.tsx
View File

@ -59,7 +59,7 @@ export function InstructionCard({
<div className="card"> <div className="card">
<div className="card-header"> <div className="card-header">
<h3 className="card-header-title mb-0 d-flex align-items-center"> <h3 className="card-header-title mb-0 d-flex align-items-center">
<span className={`badge badge-soft-${resultClass} mr-2`}> <span className={`badge bg-${resultClass}-soft me-2`}>
#{index + 1} #{index + 1}
{childIndex !== undefined ? `.${childIndex + 1}` : ""} {childIndex !== undefined ? `.${childIndex + 1}` : ""}
</span> </span>
@ -73,7 +73,7 @@ export function InstructionCard({
}`} }`}
onClick={rawClickHandler} onClick={rawClickHandler}
> >
<span className="fe fe-code mr-1"></span> <span className="fe fe-code me-1"></span>
Raw Raw
</button> </button>
</div> </div>
@ -84,7 +84,7 @@ export function InstructionCard({
<> <>
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link /> <Address pubkey={ix.programId} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/MemoDetailsCard.tsx
View File

@ -29,15 +29,15 @@ export function MemoDetailsCard({
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link /> <Address pubkey={ix.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Data (UTF-8)</td> <td>Data (UTF-8)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<pre className="d-inline-block text-left mb-0">{data}</pre> <pre className="d-inline-block text-start mb-0">{data}</pre>
</td> </td>
</tr> </tr>
</InstructionCard> </InstructionCard>

10
explorer/src/components/instruction/RawDetails.tsx
View File

@ -9,15 +9,15 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
{ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => ( {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
<tr key={keyIndex}> <tr key={keyIndex}>
<td> <td>
<div className="mr-2 d-md-inline">Account #{keyIndex + 1}</div> <div className="me-2 d-md-inline">Account #{keyIndex + 1}</div>
{isWritable && ( {isWritable && (
<span className="badge badge-soft-info mr-1">Writable</span> <span className="badge bg-info-soft me-1">Writable</span>
)} )}
{isSigner && ( {isSigner && (
<span className="badge badge-soft-info mr-1">Signer</span> <span className="badge bg-info-soft me-1">Signer</span>
)} )}
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={pubkey} alignRight link /> <Address pubkey={pubkey} alignRight link />
</td> </td>
</tr> </tr>
@ -27,7 +27,7 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
<td> <td>
Instruction Data <span className="text-muted">(Hex)</span> Instruction Data <span className="text-muted">(Hex)</span>
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
<HexData raw={ix.data} /> <HexData raw={ix.data} />
</td> </td>
</tr> </tr>

4
explorer/src/components/instruction/RawParsedDetails.tsx
View File

@ -16,8 +16,8 @@ export function RawParsedDetails({
<td> <td>
Instruction Data <span className="text-muted">(JSON)</span> Instruction Data <span className="text-muted">(JSON)</span>
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
<pre className="d-inline-block text-left json-wrap"> <pre className="d-inline-block text-start json-wrap">
{JSON.stringify(ix.parsed, null, 2)} {JSON.stringify(ix.parsed, null, 2)}
</pre> </pre>
</td> </td>

24
explorer/src/components/instruction/bonfida-bot/CancelOrderDetails.tsx
View File

@ -25,80 +25,80 @@ export function CancelOrderDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.market} alignRight link /> <Address pubkey={info.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Signal Provider Address</td> <td>Signal Provider Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.signalProviderKey} alignRight link /> <Address pubkey={info.signalProviderKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.openOrdersKey} alignRight link /> <Address pubkey={info.openOrdersKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Event Queue</td> <td>Serum Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumEventQueue} alignRight link /> <Address pubkey={info.serumEventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Bids</td> <td>Serum Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumMarketBids} alignRight link /> <Address pubkey={info.serumMarketBids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Asks</td> <td>Serum Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumMarketAsks} alignRight link /> <Address pubkey={info.serumMarketAsks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Program ID</td> <td>Serum Program ID</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.dexProgramKey} alignRight link /> <Address pubkey={info.dexProgramKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.side}</td> <td className="text-lg-end">{info.side}</td>
</tr> </tr>
<tr> <tr>
<td>Order Id</td> <td>Order Id</td>
<td className="text-lg-right">{info.orderId.toString(10)}</td> <td className="text-lg-end">{info.orderId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

10
explorer/src/components/instruction/bonfida-bot/CollectFeesDetails.tsx
View File

@ -25,35 +25,35 @@ export function CollectFeesDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Signal Provider</td> <td>Signal Provider</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.signalProviderPoolTokenKey} alignRight link /> <Address pubkey={info.signalProviderPoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Insurance Fund</td> <td>Insurance Fund</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.bonfidaFeePoolTokenKey} alignRight link /> <Address pubkey={info.bonfidaFeePoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Buy and Burn</td> <td>Buy and Burn</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.bonfidaBnBPTKey} alignRight link /> <Address pubkey={info.bonfidaBnBPTKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

22
explorer/src/components/instruction/bonfida-bot/CreateBotDetails.tsx
View File

@ -25,69 +25,69 @@ export function CreateBotDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Token Mint</td> <td>Bot Token Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mintKey} alignRight link /> <Address pubkey={info.mintKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Target Pool Token Address</td> <td>Target Pool Token Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.targetPoolTokenKey} alignRight link /> <Address pubkey={info.targetPoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Program ID</td> <td>Serum Program ID</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumProgramId} alignRight link /> <Address pubkey={info.serumProgramId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Signal Provider Address</td> <td>Signal Provider Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.signalProviderKey} alignRight link /> <Address pubkey={info.signalProviderKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Fee Ratio</td> <td>Fee Ratio</td>
<td className="text-lg-right">{info.feeRatio}</td> <td className="text-lg-end">{info.feeRatio}</td>
</tr> </tr>
<tr> <tr>
<td>Fee Collection Period</td> <td>Fee Collection Period</td>
<td className="text-lg-right">{info.feeCollectionPeriod}</td> <td className="text-lg-end">{info.feeCollectionPeriod}</td>
</tr> </tr>
<tr> <tr>
<td>Serum Markets</td> <td>Serum Markets</td>
<td className="text-lg-right">{info.markets}</td> <td className="text-lg-end">{info.markets}</td>
</tr> </tr>
<tr> <tr>
<td>Deposit Amounts</td> <td>Deposit Amounts</td>
<td className="text-lg-right">{info.depositAmounts}</td> <td className="text-lg-end">{info.depositAmounts}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

42
explorer/src/components/instruction/bonfida-bot/CreateOrderDetails.tsx
View File

@ -29,135 +29,135 @@ export function CreateOrderDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Signal Provider Address</td> <td>Signal Provider Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.signalProviderKey} alignRight link /> <Address pubkey={info.signalProviderKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.market} alignRight link /> <Address pubkey={info.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Payer Bot Asset Address</td> <td>Payer Bot Asset Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.payerPoolAssetKey} alignRight link /> <Address pubkey={info.payerPoolAssetKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Order</td> <td>Open Order</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.openOrdersKey} alignRight link /> <Address pubkey={info.openOrdersKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Request Queue</td> <td>Serum Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumRequestQueue} alignRight link /> <Address pubkey={info.serumRequestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Event Queue</td> <td>Serum Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumEventQueue} alignRight link /> <Address pubkey={info.serumEventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Bids</td> <td>Serum Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumMarketBids} alignRight link /> <Address pubkey={info.serumMarketBids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Asks</td> <td>Serum Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.serumMarketAsks} alignRight link /> <Address pubkey={info.serumMarketAsks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Coin Vault</td> <td>Coin Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.coinVaultKey} alignRight link /> <Address pubkey={info.coinVaultKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pc Vault</td> <td>Pc Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.pcVaultKey} alignRight link /> <Address pubkey={info.pcVaultKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Program ID</td> <td>Serum Program ID</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.dexProgramKey} alignRight link /> <Address pubkey={info.dexProgramKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Token Mint</td> <td>Bot Token Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={new PublicKey(info.targetMint)} alignRight link /> <Address pubkey={new PublicKey(info.targetMint)} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.side}</td> <td className="text-lg-end">{info.side}</td>
</tr> </tr>
<tr> <tr>
<td>Limit Price</td> <td>Limit Price</td>
<td className="text-lg-right">{info.limitPrice}</td> <td className="text-lg-end">{info.limitPrice}</td>
</tr> </tr>
<tr> <tr>
<td>Ratio to Trade</td> <td>Ratio to Trade</td>
<td className="text-lg-right">{info.ratioOfPoolAssetsToTrade}</td> <td className="text-lg-end">{info.ratioOfPoolAssetsToTrade}</td>
</tr> </tr>
<tr> <tr>
<td>Order Type</td> <td>Order Type</td>
<td className="text-lg-right">{info.orderType}</td> <td className="text-lg-end">{info.orderType}</td>
</tr> </tr>
<tr> <tr>
<td>Coin Lot Size</td> <td>Coin Lot Size</td>
<td className="text-lg-right">{info.coinLotSize.toString()}</td> <td className="text-lg-end">{info.coinLotSize.toString()}</td>
</tr> </tr>
<tr> <tr>
<td>Pc Lot Size</td> <td>Pc Lot Size</td>
<td className="text-lg-right">{info.pcLotSize.toString()}</td> <td className="text-lg-end">{info.pcLotSize.toString()}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

18
explorer/src/components/instruction/bonfida-bot/DepositDetails.tsx
View File

@ -25,61 +25,61 @@ export function DepositDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Signal Provider Fee Address</td> <td>Signal Provider Fee Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.sigProviderFeeReceiverKey} alignRight link /> <Address pubkey={info.sigProviderFeeReceiverKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Insurance Funds</td> <td>Insurance Funds</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.bonfidaFeeReceiverKey} alignRight link /> <Address pubkey={info.bonfidaFeeReceiverKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Buy and Burn</td> <td>Buy and Burn</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.bonfidaBuyAndBurnKey} alignRight link /> <Address pubkey={info.bonfidaBuyAndBurnKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Token Mint</td> <td>Bot Token Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mintKey} alignRight link /> <Address pubkey={info.mintKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Target Pool Token Address</td> <td>Target Pool Token Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.targetPoolTokenKey} alignRight link /> <Address pubkey={info.targetPoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Pool Token Amount</td> <td>Pool Token Amount</td>
<td className="text-lg-right">{info.poolTokenAmount.toString()}</td> <td className="text-lg-end">{info.poolTokenAmount.toString()}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

12
explorer/src/components/instruction/bonfida-bot/InitializeBotDetails.tsx
View File

@ -25,38 +25,38 @@ export function InitializeBotDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Account</td> <td>Pool Account</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolAccount} alignRight link /> <Address pubkey={info.poolAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Mint Account</td> <td>Mint Account</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mintAccount} alignRight link /> <Address pubkey={info.mintAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Max Number of Assets</td> <td>Max Number of Assets</td>
<td className="text-lg-right">{info.maxNumberOfAsset}</td> <td className="text-lg-end">{info.maxNumberOfAsset}</td>
</tr> </tr>
<tr> <tr>
<td>Number of Markets</td> <td>Number of Markets</td>
<td className="text-lg-right">{info.numberOfMarkets}</td> <td className="text-lg-end">{info.numberOfMarkets}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

14
explorer/src/components/instruction/bonfida-bot/RedeemDetails.tsx
View File

@ -25,47 +25,47 @@ export function RedeemDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Token Mint</td> <td>Bot Token Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.mintKey} alignRight link /> <Address pubkey={info.mintKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Source Bot Token Owner</td> <td>Source Bot Token Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.sourcePoolTokenKey} alignRight link /> <Address pubkey={info.sourcePoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Source Bot Token Address</td> <td>Source Bot Token Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.sourcePoolTokenKey} alignRight link /> <Address pubkey={info.sourcePoolTokenKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
<tr> <tr>
<td>Pool Token Amount</td> <td>Pool Token Amount</td>
<td className="text-lg-right">{info.poolTokenAmount}</td> <td className="text-lg-end">{info.poolTokenAmount}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

24
explorer/src/components/instruction/bonfida-bot/SettleFundsDetails.tsx
View File

@ -24,84 +24,84 @@ export function SettleFundsDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.market} alignRight link /> <Address pubkey={info.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.openOrdersKey} alignRight link /> <Address pubkey={info.openOrdersKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Address</td> <td>Bot Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolKey} alignRight link /> <Address pubkey={info.poolKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot Token Mint</td> <td>Bot Token Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.poolMintKey} alignRight link /> <Address pubkey={info.poolMintKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Coin Vault</td> <td>Coin Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.coinVaultKey} alignRight link /> <Address pubkey={info.coinVaultKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pc Vault</td> <td>Pc Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.pcVaultKey} alignRight link /> <Address pubkey={info.pcVaultKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot's Coin Address</td> <td>Bot's Coin Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.coinPoolAssetKey} alignRight link /> <Address pubkey={info.coinPoolAssetKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bot's Pc Address</td> <td>Bot's Pc Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.pcPoolAssetKey} alignRight link /> <Address pubkey={info.pcPoolAssetKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Vault Signer</td> <td>Vault Signer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.vaultSignerKey} alignRight link /> <Address pubkey={info.vaultSignerKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Serum Program ID</td> <td>Serum Program ID</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.dexProgramKey} alignRight link /> <Address pubkey={info.dexProgramKey} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Pool Seed</td> <td>Pool Seed</td>
<td className="text-lg-right">{info.poolSeed}</td> <td className="text-lg-end">{info.poolSeed}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

14
explorer/src/components/instruction/bpf-loader/BpfLoaderDetailsCard.tsx
View File

@ -70,14 +70,14 @@ export function BpfLoaderWriteDetailsCard(props: Props<WriteInfo>) {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link /> <Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account</td> <td>Account</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>
@ -86,14 +86,14 @@ export function BpfLoaderWriteDetailsCard(props: Props<WriteInfo>) {
<td> <td>
Bytes <span className="text-muted">(Base 64)</span> Bytes <span className="text-muted">(Base 64)</span>
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
<pre className="d-inline-block text-left mb-0">{bytes}</pre> <pre className="d-inline-block text-start mb-0">{bytes}</pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Offset</td> <td>Offset</td>
<td className="text-lg-right">{info.offset}</td> <td className="text-lg-end">{info.offset}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );
@ -113,14 +113,14 @@ export function BpfLoaderFinalizeDetailsCard(props: Props<FinalizeInfo>) {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link /> <Address pubkey={BPF_LOADER_PROGRAM_ID} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account</td> <td>Account</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard.tsx
View File

@ -80,7 +80,7 @@ function renderDetails<T>(
value = <Address pubkey={value} alignRight link />; value = <Address pubkey={value} alignRight link />;
} else if (key === "bytes") { } else if (key === "bytes") {
value = ( value = (
<pre className="d-inline-block text-left mb-0 data-wrap">{value}</pre> <pre className="d-inline-block text-start mb-0 data-wrap">{value}</pre>
); );
} }
@ -90,7 +90,7 @@ function renderDetails<T>(
{camelToTitleCase(key)}{" "} {camelToTitleCase(key)}{" "}
{key === "bytes" && <span className="text-muted">(Base 64)</span>} {key === "bytes" && <span className="text-muted">(Base 64)</span>}
</td> </td>
<td className="text-lg-right">{value}</td> <td className="text-lg-end">{value}</td>
</tr> </tr>
); );
} }
@ -102,7 +102,7 @@ function renderDetails<T>(
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={props.ix.programId} alignRight link /> <Address pubkey={props.ix.programId} alignRight link />
</td> </td>
</tr> </tr>

22
explorer/src/components/instruction/mango/AddPerpMarketDetailsCard.tsx
View File

@ -24,50 +24,50 @@ export function AddPerpMarketDetailsCard(props: {
> >
<tr> <tr>
<td>Market index</td> <td>Market index</td>
<td className="text-lg-right">{info.marketIndex}</td> <td className="text-lg-end">{info.marketIndex}</td>
</tr> </tr>
<tr> <tr>
<td>Maintenance leverage</td> <td>Maintenance leverage</td>
<td className="text-lg-right">{info.maintLeverage}</td> <td className="text-lg-end">{info.maintLeverage}</td>
</tr> </tr>
<tr> <tr>
<td>Initial leverage</td> <td>Initial leverage</td>
<td className="text-lg-right">{info.initLeverage}</td> <td className="text-lg-end">{info.initLeverage}</td>
</tr> </tr>
<tr> <tr>
<td>Liquidation fee</td> <td>Liquidation fee</td>
<td className="text-lg-right">{info.liquidationFee}</td> <td className="text-lg-end">{info.liquidationFee}</td>
</tr> </tr>
<tr> <tr>
<td>Maker fee</td> <td>Maker fee</td>
<td className="text-lg-right">{info.makerFee}</td> <td className="text-lg-end">{info.makerFee}</td>
</tr> </tr>
<tr> <tr>
<td>Taker fee</td> <td>Taker fee</td>
<td className="text-lg-right">{info.takerFee}</td> <td className="text-lg-end">{info.takerFee}</td>
</tr> </tr>
<tr> <tr>
<td>Base lot size</td> <td>Base lot size</td>
<td className="text-lg-right">{info.baseLotSize}</td> <td className="text-lg-end">{info.baseLotSize}</td>
</tr> </tr>
<tr> <tr>
<td>Quote lot size</td> <td>Quote lot size</td>
<td className="text-lg-right">{info.quoteLotSize}</td> <td className="text-lg-end">{info.quoteLotSize}</td>
</tr> </tr>
<tr> <tr>
<td>Rate</td> <td>Rate</td>
<td className="text-lg-right">{info.rate}</td> <td className="text-lg-end">{info.rate}</td>
</tr> </tr>
<tr> <tr>
<td>Max depth bps</td> <td>Max depth bps</td>
<td className="text-lg-right">{info.maxDepthBps}</td> <td className="text-lg-end">{info.maxDepthBps}</td>
</tr> </tr>
<tr> <tr>
<td> <td>
MNGO per{" "} MNGO per{" "}
{moment.duration(info.targetPeriodLength, "seconds").humanize()} {moment.duration(info.targetPeriodLength, "seconds").humanize()}
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.mngoPerPeriod} {} {info.mngoPerPeriod} {}
</td> </td>
</tr> </tr>

16
explorer/src/components/instruction/mango/AddSpotMarketDetailsCard.tsx
View File

@ -24,38 +24,38 @@ export function AddSpotMarketDetailsCard(props: {
{spotMarketFromIndex(ix, info.marketIndex) !== "UNKNOWN" && ( {spotMarketFromIndex(ix, info.marketIndex) !== "UNKNOWN" && (
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
{spotMarketFromIndex(ix, info.marketIndex)} {spotMarketFromIndex(ix, info.marketIndex)}
</td> </td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Market index</td> <td>Market index</td>
<td className="text-lg-right">{info.marketIndex}</td> <td className="text-lg-end">{info.marketIndex}</td>
</tr> </tr>
<tr> <tr>
<td>Maint leverage</td> <td>Maint leverage</td>
<td className="text-lg-right">{info.maintLeverage}</td> <td className="text-lg-end">{info.maintLeverage}</td>
</tr> </tr>
<tr> <tr>
<td>Init leverage</td> <td>Init leverage</td>
<td className="text-lg-right">{info.initLeverage}</td> <td className="text-lg-end">{info.initLeverage}</td>
</tr> </tr>
<tr> <tr>
<td>Liquidation fee</td> <td>Liquidation fee</td>
<td className="text-lg-right">{info.liquidationFee}</td> <td className="text-lg-end">{info.liquidationFee}</td>
</tr> </tr>
<tr> <tr>
<td>Optimal util</td> <td>Optimal util</td>
<td className="text-lg-right">{info.optimalUtil}</td> <td className="text-lg-end">{info.optimalUtil}</td>
</tr> </tr>
<tr> <tr>
<td>Optimal rate</td> <td>Optimal rate</td>
<td className="text-lg-right">{info.optimalRate}</td> <td className="text-lg-end">{info.optimalRate}</td>
</tr> </tr>
<tr> <tr>
<td>Max rate</td> <td>Max rate</td>
<td className="text-lg-right">{info.maxRate}</td> <td className="text-lg-end">{info.maxRate}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

4
explorer/src/components/instruction/mango/CancelPerpOrderDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function CancelPerpOrderDetailsCard(props: {
{mangoPerpMarketConfig !== undefined && ( {mangoPerpMarketConfig !== undefined && (
<tr> <tr>
<td>Perp market</td> <td>Perp market</td>
<td className="text-lg-right">{mangoPerpMarketConfig.name}</td> <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
</tr> </tr>
)} )}
@ -51,7 +51,7 @@ export function CancelPerpOrderDetailsCard(props: {
<tr> <tr>
<td>Order Id</td> <td>Order Id</td>
<td className="text-lg-right">{info.orderId}</td> <td className="text-lg-end">{info.orderId}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

4
explorer/src/components/instruction/mango/CancelSpotOrderDetailsCard.tsx
View File

@ -38,7 +38,7 @@ export function CancelSpotOrderDetailsCard(props: {
{mangoSpotMarketConfig !== undefined && ( {mangoSpotMarketConfig !== undefined && (
<tr> <tr>
<td>Spot market</td> <td>Spot market</td>
<td className="text-lg-right">{mangoSpotMarketConfig.name}</td> <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
</tr> </tr>
)} )}
@ -51,7 +51,7 @@ export function CancelSpotOrderDetailsCard(props: {
<tr> <tr>
<td>Order Id</td> <td>Order Id</td>
<td className="text-lg-right">{info.orderId}</td> <td className="text-lg-end">{info.orderId}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

18
explorer/src/components/instruction/mango/ChangePerpMarketParamsDetailsCard.tsx
View File

@ -59,25 +59,25 @@ export function ChangePerpMarketParamsDetailsCard(props: {
{info.initLeverageOption && ( {info.initLeverageOption && (
<tr> <tr>
<td>Init leverage</td> <td>Init leverage</td>
<td className="text-lg-right">{info.initLeverage}</td> <td className="text-lg-end">{info.initLeverage}</td>
</tr> </tr>
)} )}
{info.liquidationFeeOption && ( {info.liquidationFeeOption && (
<tr> <tr>
<td>Liquidation fee</td> <td>Liquidation fee</td>
<td className="text-lg-right">{info.liquidationFee}</td> <td className="text-lg-end">{info.liquidationFee}</td>
</tr> </tr>
)} )}
{info.maintLeverageOption && ( {info.maintLeverageOption && (
<tr> <tr>
<td>Maint leverage</td> <td>Maint leverage</td>
<td className="text-lg-right">{info.maintLeverage}</td> <td className="text-lg-end">{info.maintLeverage}</td>
</tr> </tr>
)} )}
{info.makerFeeOption && ( {info.makerFeeOption && (
<tr> <tr>
<td>Maker fee</td> <td>Maker fee</td>
<td className="text-lg-right">{info.makerFee}</td> <td className="text-lg-end">{info.makerFee}</td>
</tr> </tr>
)} )}
{info.mngoPerPeriodOption && ( {info.mngoPerPeriodOption && (
@ -87,7 +87,7 @@ export function ChangePerpMarketParamsDetailsCard(props: {
{targetPeriodLength !== null && {targetPeriodLength !== null &&
moment.duration(targetPeriodLength, "seconds").humanize()} moment.duration(targetPeriodLength, "seconds").humanize()}
</td> </td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.mngoPerPeriod} {} {info.mngoPerPeriod} {}
</td> </td>
</tr> </tr>
@ -96,25 +96,25 @@ export function ChangePerpMarketParamsDetailsCard(props: {
{info.maxDepthBpsOption && ( {info.maxDepthBpsOption && (
<tr> <tr>
<td>Max depth bps</td> <td>Max depth bps</td>
<td className="text-lg-right">{info.maxDepthBps}</td> <td className="text-lg-end">{info.maxDepthBps}</td>
</tr> </tr>
)} )}
{info.rateOption && ( {info.rateOption && (
<tr> <tr>
<td>Rate</td> <td>Rate</td>
<td className="text-lg-right">{info.rate}</td> <td className="text-lg-end">{info.rate}</td>
</tr> </tr>
)} )}
{info.takerFeeOption && ( {info.takerFeeOption && (
<tr> <tr>
<td>Taker fee</td> <td>Taker fee</td>
<td className="text-lg-right">{info.takerFee}</td> <td className="text-lg-end">{info.takerFee}</td>
</tr> </tr>
)} )}
{info.targetPeriodLengthOption && ( {info.targetPeriodLengthOption && (
<tr> <tr>
<td>Target period length</td> <td>Target period length</td>
<td className="text-lg-right">{info.targetPeriodLength}</td> <td className="text-lg-end">{info.targetPeriodLength}</td>
</tr> </tr>
)} )}
</InstructionCard> </InstructionCard>

2
explorer/src/components/instruction/mango/ConsumeEventsDetailsCard.tsx
View File

@ -30,7 +30,7 @@ export function ConsumeEventsDetailsCard(props: {
{mangoPerpMarketConfig !== undefined && ( {mangoPerpMarketConfig !== undefined && (
<tr> <tr>
<td>Perp market</td> <td>Perp market</td>
<td className="text-lg-right">{mangoPerpMarketConfig.name}</td> <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
</tr> </tr>
)} )}

2
explorer/src/components/instruction/mango/GenericPerpMngoDetailsCard.tsx
View File

@ -49,7 +49,7 @@ export function GenericPerpMngoDetailsCard(props: {
{mangoPerpMarketConfig !== undefined && ( {mangoPerpMarketConfig !== undefined && (
<tr> <tr>
<td>Perp market</td> <td>Perp market</td>
<td className="text-lg-right">{mangoPerpMarketConfig.name}</td> <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
</tr> </tr>
)} )}

2
explorer/src/components/instruction/mango/GenericSpotMngoDetailsCard.tsx
View File

@ -49,7 +49,7 @@ export function GenericSpotMngoDetailsCard(props: {
{mangoSpotMarketConfig !== undefined && ( {mangoSpotMarketConfig !== undefined && (
<tr> <tr>
<td>Spot market</td> <td>Spot market</td>
<td className="text-lg-right">{mangoSpotMarketConfig.name}</td> <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
</tr> </tr>
)} )}

12
explorer/src/components/instruction/mango/PlacePerpOrderDetailsCard.tsx
View File

@ -73,7 +73,7 @@ export function PlacePerpOrderDetailsCard(props: {
{mangoPerpMarketConfig !== undefined && ( {mangoPerpMarketConfig !== undefined && (
<tr> <tr>
<td>Perp market</td> <td>Perp market</td>
<td className="text-lg-right">{mangoPerpMarketConfig.name}</td> <td className="text-lg-end">{mangoPerpMarketConfig.name}</td>
</tr> </tr>
)} )}
@ -87,30 +87,30 @@ export function PlacePerpOrderDetailsCard(props: {
{info.clientOrderId !== "0" && ( {info.clientOrderId !== "0" && (
<tr> <tr>
<td>Client order Id</td> <td>Client order Id</td>
<td className="text-lg-right">{info.clientOrderId}</td> <td className="text-lg-end">{info.clientOrderId}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Order type</td> <td>Order type</td>
<td className="text-lg-right">{info.orderType}</td> <td className="text-lg-end">{info.orderType}</td>
</tr> </tr>
<tr> <tr>
<td>side</td> <td>side</td>
<td className="text-lg-right">{info.side}</td> <td className="text-lg-end">{info.side}</td>
</tr> </tr>
{orderLotDetails !== null && ( {orderLotDetails !== null && (
<tr> <tr>
<td>price</td> <td>price</td>
<td className="text-lg-right">{orderLotDetails?.price} USDC</td> <td className="text-lg-end">{orderLotDetails?.price} USDC</td>
</tr> </tr>
)} )}
{orderLotDetails !== null && ( {orderLotDetails !== null && (
<tr> <tr>
<td>quantity</td> <td>quantity</td>
<td className="text-lg-right">{orderLotDetails?.size}</td> <td className="text-lg-end">{orderLotDetails?.size}</td>
</tr> </tr>
)} )}
</InstructionCard> </InstructionCard>

12
explorer/src/components/instruction/mango/PlaceSpotOrderDetailsCard.tsx
View File

@ -83,7 +83,7 @@ export function PlaceSpotOrderDetailsCard(props: {
{mangoSpotMarketConfig !== undefined && ( {mangoSpotMarketConfig !== undefined && (
<tr> <tr>
<td>Spot market</td> <td>Spot market</td>
<td className="text-lg-right">{mangoSpotMarketConfig.name}</td> <td className="text-lg-end">{mangoSpotMarketConfig.name}</td>
</tr> </tr>
)} )}
@ -96,33 +96,33 @@ export function PlaceSpotOrderDetailsCard(props: {
<tr> <tr>
<td>Order type</td> <td>Order type</td>
<td className="text-lg-right">{info.orderType}</td> <td className="text-lg-end">{info.orderType}</td>
</tr> </tr>
{info.clientId !== "0" && ( {info.clientId !== "0" && (
<tr> <tr>
<td>Client Id</td> <td>Client Id</td>
<td className="text-lg-right">{info.clientId}</td> <td className="text-lg-end">{info.clientId}</td>
</tr> </tr>
)} )}
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.side}</td> <td className="text-lg-end">{info.side}</td>
</tr> </tr>
{orderLotDetails !== null && ( {orderLotDetails !== null && (
<tr> <tr>
<td>Limit price</td> <td>Limit price</td>
{/* todo fix price */} {/* todo fix price */}
<td className="text-lg-right">{orderLotDetails?.price} USDC</td> <td className="text-lg-end">{orderLotDetails?.price} USDC</td>
</tr> </tr>
)} )}
{orderLotDetails !== null && ( {orderLotDetails !== null && (
<tr> <tr>
<td>Size</td> <td>Size</td>
<td className="text-lg-right">{orderLotDetails?.size}</td> <td className="text-lg-end">{orderLotDetails?.size}</td>
</tr> </tr>
)} )}
</InstructionCard> </InstructionCard>

10
explorer/src/components/instruction/serum/CancelOrderByClientIdDetails.tsx
View File

@ -25,35 +25,35 @@ export function CancelOrderByClientIdDetailsCard(props: {
> >
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Client Id</td> <td>Client Id</td>
<td className="text-lg-right">{info.data.clientId.toString(10)}</td> <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

14
explorer/src/components/instruction/serum/CancelOrderByClientIdV2Details.tsx
View File

@ -25,49 +25,49 @@ export function CancelOrderByClientIdV2DetailsCard(props: {
> >
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Client Id</td> <td>Client Id</td>
<td className="text-lg-right">{info.data.clientId.toString(10)}</td> <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

16
explorer/src/components/instruction/serum/CancelOrderDetails.tsx
View File

@ -25,52 +25,52 @@ export function CancelOrderDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.data.side}</td> <td className="text-lg-end">{info.data.side}</td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Slot</td> <td>Open Orders Slot</td>
<td className="text-lg-right">{info.data.openOrdersSlot}</td> <td className="text-lg-end">{info.data.openOrdersSlot}</td>
</tr> </tr>
<tr> <tr>
<td>Order Id</td> <td>Order Id</td>
<td className="text-lg-right">{info.data.orderId.toString(10)}</td> <td className="text-lg-end">{info.data.orderId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

18
explorer/src/components/instruction/serum/CancelOrderV2Details.tsx
View File

@ -25,61 +25,61 @@ export function CancelOrderV2DetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.data.side}</td> <td className="text-lg-end">{info.data.side}</td>
</tr> </tr>
<tr> <tr>
<td>Order Id</td> <td>Order Id</td>
<td className="text-lg-right">{info.data.orderId.toString(10)}</td> <td className="text-lg-end">{info.data.orderId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

10
explorer/src/components/instruction/serum/CloseOpenOrdersDetails.tsx
View File

@ -25,35 +25,35 @@ export function CloseOpenOrdersDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Rent Receiver</td> <td>Rent Receiver</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.rentReceiver} alignRight link /> <Address pubkey={info.accounts.rentReceiver} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/serum/ConsumeEventsDetails.tsx
View File

@ -25,28 +25,28 @@ export function ConsumeEventsDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Accounts</td> <td>Open Orders Accounts</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.accounts.openOrders.map((account, index) => { {info.accounts.openOrders.map((account, index) => {
return <Address pubkey={account} key={index} alignRight link />; return <Address pubkey={account} key={index} alignRight link />;
})} })}
@ -55,7 +55,7 @@ export function ConsumeEventsDetailsCard(props: {
<tr> <tr>
<td>Limit</td> <td>Limit</td>
<td className="text-lg-right">{info.data.limit}</td> <td className="text-lg-end">{info.data.limit}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

12
explorer/src/components/instruction/serum/ConsumeEventsPermissionedDetails.tsx
View File

@ -25,35 +25,35 @@ export function ConsumeEventsPermissionedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Crank Authority</td> <td>Crank Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.crankAuthority} alignRight link /> <Address pubkey={info.accounts.crankAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Accounts</td> <td>Open Orders Accounts</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.accounts.openOrders.map((account, index) => { {info.accounts.openOrders.map((account, index) => {
return <Address pubkey={account} key={index} alignRight link />; return <Address pubkey={account} key={index} alignRight link />;
})} })}
@ -62,7 +62,7 @@ export function ConsumeEventsPermissionedDetailsCard(props: {
<tr> <tr>
<td>Limit</td> <td>Limit</td>
<td className="text-lg-right">{info.data.limit}</td> <td className="text-lg-end">{info.data.limit}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

6
explorer/src/components/instruction/serum/DisableMarketDetails.tsx
View File

@ -25,21 +25,21 @@ export function DisableMarketDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Disable Authority</td> <td>Disable Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.disableAuthority} alignRight link /> <Address pubkey={info.accounts.disableAuthority} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/serum/InitOpenOrdersDetails.tsx
View File

@ -25,28 +25,28 @@ export function InitOpenOrdersDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
@ -54,7 +54,7 @@ export function InitOpenOrdersDetailsCard(props: {
{info.accounts.openOrdersMarketAuthority && ( {info.accounts.openOrdersMarketAuthority && (
<tr> <tr>
<td>Open Orders Market Authority</td> <td>Open Orders Market Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={info.accounts.openOrdersMarketAuthority} pubkey={info.accounts.openOrdersMarketAuthority}
alignRight alignRight

30
explorer/src/components/instruction/serum/InitializeMarketDetailsCard.tsx
View File

@ -25,99 +25,99 @@ export function InitializeMarketDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Vault</td> <td>Base Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseVault} alignRight link /> <Address pubkey={info.accounts.baseVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Vault</td> <td>Quote Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link /> <Address pubkey={info.accounts.quoteVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Mint</td> <td>Base Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseMint} alignRight link /> <Address pubkey={info.accounts.baseMint} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Mint</td> <td>Quote Mint</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteMint} alignRight link /> <Address pubkey={info.accounts.quoteMint} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Lot Size</td> <td>Base Lot Size</td>
<td className="text-lg-right">{info.data.baseLotSize.toString(10)}</td> <td className="text-lg-end">{info.data.baseLotSize.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Quote Lot Size</td> <td>Quote Lot Size</td>
<td className="text-lg-right">{info.data.quoteLotSize.toString(10)}</td> <td className="text-lg-end">{info.data.quoteLotSize.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Fee Rate Bps</td> <td>Fee Rate Bps</td>
<td className="text-lg-right">{info.data.feeRateBps}</td> <td className="text-lg-end">{info.data.feeRateBps}</td>
</tr> </tr>
<tr> <tr>
<td>Quote Dust Threshold</td> <td>Quote Dust Threshold</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.data.quoteDustThreshold.toString(10)} {info.data.quoteDustThreshold.toString(10)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Vault Signer Nonce</td> <td>Vault Signer Nonce</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.data.vaultSignerNonce.toString(10)} {info.data.vaultSignerNonce.toString(10)}
</td> </td>
</tr> </tr>

14
explorer/src/components/instruction/serum/MatchOrdersDetailsCard.tsx
View File

@ -25,49 +25,49 @@ export function MatchOrdersDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Limit</td> <td>Limit</td>
<td className="text-lg-right">{info.data.limit}</td> <td className="text-lg-end">{info.data.limit}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

26
explorer/src/components/instruction/serum/NewOrderDetailsCard.tsx
View File

@ -25,83 +25,83 @@ export function NewOrderDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Payer</td> <td>Payer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.payer} alignRight link /> <Address pubkey={info.accounts.payer} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Vault</td> <td>Base Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseVault} alignRight link /> <Address pubkey={info.accounts.baseVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Vault</td> <td>Quote Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link /> <Address pubkey={info.accounts.quoteVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.data.side}</td> <td className="text-lg-end">{info.data.side}</td>
</tr> </tr>
<tr> <tr>
<td>Order Type</td> <td>Order Type</td>
<td className="text-lg-right">{info.data.orderType}</td> <td className="text-lg-end">{info.data.orderType}</td>
</tr> </tr>
<tr> <tr>
<td>Limit Price</td> <td>Limit Price</td>
<td className="text-lg-right">{info.data.limitPrice.toString(10)}</td> <td className="text-lg-end">{info.data.limitPrice.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Max Quantity</td> <td>Max Quantity</td>
<td className="text-lg-right">{info.data.maxQuantity.toString(10)}</td> <td className="text-lg-end">{info.data.maxQuantity.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Client Id</td> <td>Client Id</td>
<td className="text-lg-right">{info.data.clientId.toString(10)}</td> <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

38
explorer/src/components/instruction/serum/NewOrderV3DetailsCard.tsx
View File

@ -25,77 +25,77 @@ export function NewOrderV3DetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Request Queue</td> <td>Request Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link /> <Address pubkey={info.accounts.requestQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Payer</td> <td>Payer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.payer} alignRight link /> <Address pubkey={info.accounts.payer} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Vault</td> <td>Base Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseVault} alignRight link /> <Address pubkey={info.accounts.baseVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Vault</td> <td>Quote Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link /> <Address pubkey={info.accounts.quoteVault} alignRight link />
</td> </td>
</tr> </tr>
@ -103,7 +103,7 @@ export function NewOrderV3DetailsCard(props: {
{info.accounts.feeDiscountPubkey && ( {info.accounts.feeDiscountPubkey && (
<tr> <tr>
<td>Fee Discount</td> <td>Fee Discount</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.feeDiscountPubkey} alignRight link /> <Address pubkey={info.accounts.feeDiscountPubkey} alignRight link />
</td> </td>
</tr> </tr>
@ -111,41 +111,41 @@ export function NewOrderV3DetailsCard(props: {
<tr> <tr>
<td>Side</td> <td>Side</td>
<td className="text-lg-right">{info.data.side.toUpperCase()}</td> <td className="text-lg-end">{info.data.side.toUpperCase()}</td>
</tr> </tr>
<tr> <tr>
<td>Order Type</td> <td>Order Type</td>
<td className="text-lg-right">{info.data.orderType}</td> <td className="text-lg-end">{info.data.orderType}</td>
</tr> </tr>
<tr> <tr>
<td>Limit Price</td> <td>Limit Price</td>
<td className="text-lg-right">{info.data.limitPrice.toString(10)}</td> <td className="text-lg-end">{info.data.limitPrice.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Max Base Quantity</td> <td>Max Base Quantity</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.data.maxBaseQuantity.toString(10)} {info.data.maxBaseQuantity.toString(10)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Max Quote Quantity</td> <td>Max Quote Quantity</td>
<td className="text-lg-right"> <td className="text-lg-end">
{info.data.maxQuoteQuantity.toString(10)} {info.data.maxQuoteQuantity.toString(10)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Client Id</td> <td>Client Id</td>
<td className="text-lg-right">{info.data.clientId.toString(10)}</td> <td className="text-lg-end">{info.data.clientId.toString(10)}</td>
</tr> </tr>
<tr> <tr>
<td>Match Iteration Limit</td> <td>Match Iteration Limit</td>
<td className="text-lg-right">{info.data.limit}</td> <td className="text-lg-end">{info.data.limit}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

18
explorer/src/components/instruction/serum/PruneDetails.tsx
View File

@ -25,63 +25,63 @@ export function PruneDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Bids</td> <td>Bids</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.bids} alignRight link /> <Address pubkey={info.accounts.bids} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Asks</td> <td>Asks</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.asks} alignRight link /> <Address pubkey={info.accounts.asks} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Prune Authority</td> <td>Prune Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.pruneAuthority} alignRight link /> <Address pubkey={info.accounts.pruneAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Event Queue</td> <td>Event Queue</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.eventQueue} alignRight link /> <Address pubkey={info.accounts.eventQueue} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Iteration Limit</td> <td>Iteration Limit</td>
<td className="text-lg-right">{info.data.limit}</td> <td className="text-lg-end">{info.data.limit}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

20
explorer/src/components/instruction/serum/SettleFundsDetailsCard.tsx
View File

@ -25,63 +25,63 @@ export function SettleFundsDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders</td> <td>Open Orders</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link /> <Address pubkey={info.accounts.openOrders} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Open Orders Owner</td> <td>Open Orders Owner</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link /> <Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Vault</td> <td>Base Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseVault} alignRight link /> <Address pubkey={info.accounts.baseVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Vault</td> <td>Quote Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link /> <Address pubkey={info.accounts.quoteVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Wallet</td> <td>Base Wallet</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.baseWallet} alignRight link /> <Address pubkey={info.accounts.baseWallet} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Wallet</td> <td>Quote Wallet</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteWallet} alignRight link /> <Address pubkey={info.accounts.quoteWallet} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Vault Signer</td> <td>Vault Signer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.vaultSigner} alignRight link /> <Address pubkey={info.accounts.vaultSigner} alignRight link />
</td> </td>
</tr> </tr>
@ -89,7 +89,7 @@ export function SettleFundsDetailsCard(props: {
{info.accounts.referrerQuoteWallet && ( {info.accounts.referrerQuoteWallet && (
<tr> <tr>
<td>Referrer Quote Wallet</td> <td>Referrer Quote Wallet</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={info.accounts.referrerQuoteWallet} pubkey={info.accounts.referrerQuoteWallet}
alignRight alignRight

12
explorer/src/components/instruction/serum/SweepFeesDetails.tsx
View File

@ -25,28 +25,28 @@ export function SweepFeesDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.programId} alignRight link /> <Address pubkey={info.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Market</td> <td>Market</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link /> <Address pubkey={info.accounts.market} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Quote Vault</td> <td>Quote Vault</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link /> <Address pubkey={info.accounts.quoteVault} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Fee Sweeping Authority</td> <td>Fee Sweeping Authority</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address <Address
pubkey={info.accounts.feeSweepingAuthority} pubkey={info.accounts.feeSweepingAuthority}
alignRight alignRight
@ -57,14 +57,14 @@ export function SweepFeesDetailsCard(props: {
<tr> <tr>
<td>Fee Receiver</td> <td>Fee Receiver</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.quoteFeeReceiver} alignRight link /> <Address pubkey={info.accounts.quoteFeeReceiver} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Vault Signer</td> <td>Vault Signer</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.accounts.vaultSigner} alignRight link /> <Address pubkey={info.accounts.vaultSigner} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/stake/AuthorizeDetailsCard.tsx
View File

@ -29,35 +29,35 @@ export function AuthorizeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Old Authority Address</td> <td>Old Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.authority} alignRight link /> <Address pubkey={info.authority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Authority Address</td> <td>New Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.newAuthority} alignRight link /> <Address pubkey={info.newAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Type</td> <td>Authority Type</td>
<td className="text-lg-right">{info.authorityType}</td> <td className="text-lg-end">{info.authorityType}</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

6
explorer/src/components/instruction/stake/DeactivateDetailsCard.tsx
View File

@ -29,21 +29,21 @@ export function DeactivateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAuthority} alignRight link /> <Address pubkey={info.stakeAuthority} alignRight link />
</td> </td>
</tr> </tr>

8
explorer/src/components/instruction/stake/DelegateDetailsCard.tsx
View File

@ -29,28 +29,28 @@ export function DelegateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Delegated Vote Address</td> <td>Delegated Vote Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.voteAccount} alignRight link /> <Address pubkey={info.voteAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAuthority} alignRight link /> <Address pubkey={info.stakeAuthority} alignRight link />
</td> </td>
</tr> </tr>

14
explorer/src/components/instruction/stake/InitializeDetailsCard.tsx
View File

@ -32,28 +32,28 @@ export function InitializeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Authority Address</td> <td>Stake Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.authorized.staker} alignRight link /> <Address pubkey={info.authorized.staker} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Authority Address</td> <td>Withdraw Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.authorized.withdrawer} alignRight link /> <Address pubkey={info.authorized.withdrawer} alignRight link />
</td> </td>
</tr> </tr>
@ -61,7 +61,7 @@ export function InitializeDetailsCard(props: {
{info.lockup.epoch > 0 && ( {info.lockup.epoch > 0 && (
<tr> <tr>
<td>Lockup Expiry Epoch</td> <td>Lockup Expiry Epoch</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Epoch epoch={info.lockup.epoch} link /> <Epoch epoch={info.lockup.epoch} link />
</td> </td>
</tr> </tr>
@ -70,7 +70,7 @@ export function InitializeDetailsCard(props: {
{info.lockup.unixTimestamp > 0 && ( {info.lockup.unixTimestamp > 0 && (
<tr> <tr>
<td>Lockup Expiry Timestamp</td> <td>Lockup Expiry Timestamp</td>
<td className="text-lg-right text-monospace"> <td className="text-lg-end font-monospace">
{displayTimestampUtc(info.lockup.unixTimestamp * 1000)} {displayTimestampUtc(info.lockup.unixTimestamp * 1000)}
</td> </td>
</tr> </tr>
@ -79,7 +79,7 @@ export function InitializeDetailsCard(props: {
{!info.lockup.custodian.equals(SystemProgram.programId) && ( {!info.lockup.custodian.equals(SystemProgram.programId) && (
<tr> <tr>
<td>Lockup Custodian Address</td> <td>Lockup Custodian Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.lockup.custodian} alignRight link /> <Address pubkey={info.lockup.custodian} alignRight link />
</td> </td>
</tr> </tr>

12
explorer/src/components/instruction/stake/MergeDetailsCard.tsx
View File

@ -29,42 +29,42 @@ export function MergeDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Source</td> <td>Stake Source</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.source} alignRight link /> <Address pubkey={info.source} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Destination</td> <td>Stake Destination</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.destination} alignRight link /> <Address pubkey={info.destination} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAuthority} alignRight link /> <Address pubkey={info.stakeAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Clock Sysvar</td> <td>Clock Sysvar</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.clockSysvar} alignRight link /> <Address pubkey={info.clockSysvar} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake History Sysvar</td> <td>Stake History Sysvar</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeHistorySysvar} alignRight link /> <Address pubkey={info.stakeHistorySysvar} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/stake/SplitDetailsCard.tsx
View File

@ -30,35 +30,35 @@ export function SplitDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAuthority} alignRight link /> <Address pubkey={info.stakeAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>New Stake Address</td> <td>New Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.newSplitAccount} alignRight link /> <Address pubkey={info.newSplitAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Split Amount (SOL)</td> <td>Split Amount (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={info.lamports} /> <SolBalance lamports={info.lamports} />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/stake/WithdrawDetailsCard.tsx
View File

@ -30,35 +30,35 @@ export function WithdrawDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={StakeProgram.programId} alignRight link /> <Address pubkey={StakeProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Stake Address</td> <td>Stake Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.stakeAccount} alignRight link /> <Address pubkey={info.stakeAccount} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Authority Address</td> <td>Authority Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.withdrawAuthority} alignRight link /> <Address pubkey={info.withdrawAuthority} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>To Address</td> <td>To Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.destination} alignRight link /> <Address pubkey={info.destination} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Withdraw Amount (SOL)</td> <td>Withdraw Amount (SOL)</td>
<td className="text-lg-right"> <td className="text-lg-end">
<SolBalance lamports={info.lamports} /> <SolBalance lamports={info.lamports} />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/system/AllocateDetailsCard.tsx
View File

@ -29,21 +29,21 @@ export function AllocateDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Allocated Data Size</td> <td>Allocated Data Size</td>
<td className="text-lg-right">{info.space} byte(s)</td> <td className="text-lg-end">{info.space} byte(s)</td>
</tr> </tr>
</InstructionCard> </InstructionCard>
); );

12
explorer/src/components/instruction/system/AllocateWithSeedDetailsCard.tsx
View File

@ -30,28 +30,28 @@ export function AllocateWithSeedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.base} alignRight link /> <Address pubkey={info.base} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Copyable text={info.seed}> <Copyable text={info.seed}>
<code>{info.seed}</code> <code>{info.seed}</code>
</Copyable> </Copyable>
@ -60,12 +60,12 @@ export function AllocateWithSeedDetailsCard(props: {
<tr> <tr>
<td>Allocated Data Size</td> <td>Allocated Data Size</td>
<td className="text-lg-right">{info.space} byte(s)</td> <td className="text-lg-end">{info.space} byte(s)</td>
</tr> </tr>
<tr> <tr>
<td>Assigned Program Id</td> <td>Assigned Program Id</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.owner} alignRight link /> <Address pubkey={info.owner} alignRight link />
</td> </td>
</tr> </tr>

6
explorer/src/components/instruction/system/AssignDetailsCard.tsx
View File

@ -29,21 +29,21 @@ export function AssignDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Assigned Program Id</td> <td>Assigned Program Id</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.owner} alignRight link /> <Address pubkey={info.owner} alignRight link />
</td> </td>
</tr> </tr>

10
explorer/src/components/instruction/system/AssignWithSeedDetailsCard.tsx
View File

@ -30,28 +30,28 @@ export function AssignWithSeedDetailsCard(props: {
> >
<tr> <tr>
<td>Program</td> <td>Program</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={SystemProgram.programId} alignRight link /> <Address pubkey={SystemProgram.programId} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Account Address</td> <td>Account Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.account} alignRight link /> <Address pubkey={info.account} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Base Address</td> <td>Base Address</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.base} alignRight link /> <Address pubkey={info.base} alignRight link />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Seed</td> <td>Seed</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Copyable text={info.seed}> <Copyable text={info.seed}>
<code>{info.seed}</code> <code>{info.seed}</code>
</Copyable> </Copyable>
@ -60,7 +60,7 @@ export function AssignWithSeedDetailsCard(props: {
<tr> <tr>
<td>Assigned Program Id</td> <td>Assigned Program Id</td>
<td className="text-lg-right"> <td className="text-lg-end">
<Address pubkey={info.owner} alignRight link /> <Address pubkey={info.owner} alignRight link />
</td> </td>
</tr> </tr>

Some files were not shown because too many files have changed in this diff Show More