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

View File

@ -36,7 +36,7 @@
"@types/socket.io-client": "^3.0.0",
"bignumber.js": "^9.0.1",
"bn.js": "^5.2.0",
"bootstrap": "^4.6.0",
"bootstrap": "~5.1.3",
"bs58": "^4.0.1",
"chai": "^4.3.4",
"chart.js": "^2.9.4",
@ -4858,6 +4858,16 @@
"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": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@ -8229,16 +8239,15 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"node_modules/bootstrap": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.1"
"@popperjs/core": "^2.10.2"
}
},
"node_modules/borsh": {
@ -17948,12 +17957,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": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@ -20067,17 +20070,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": {
"version": "1.0.28",
"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": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/@project-serum/anchor/-/anchor-0.11.1.tgz",
@ -33721,9 +33719,9 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bootstrap": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"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": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
@ -42910,12 +42902,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": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

View File

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

View File

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

View File

@ -36,13 +36,13 @@ function Button() {
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) {
case ClusterStatus.Connected:
return (
<span className={btnClasses("primary")}>
<span className="fe fe-check-circle mr-2"></span>
<span className="fe fe-check-circle me-2"></span>
{statusName}
</span>
);
@ -62,7 +62,7 @@ function Button() {
case ClusterStatus.Failure:
return (
<span className={btnClasses("danger")}>
<span className="fe fe-alert-circle mr-2"></span>
<span className="fe fe-alert-circle me-2"></span>
{statusName}
</span>
);

View File

@ -67,7 +67,7 @@ export function MessageBanner() {
<div className="container">
<div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
<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}
</h3>
{timeframe}

View File

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

View File

@ -42,13 +42,13 @@ export function ProgramLogsCardBody({
<tr key={index}>
<td>
<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}
</span>
{programName} Instruction
</div>
{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) => {
return (
<span key={key}>

View File

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

View File

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

View File

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

View File

@ -172,11 +172,11 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
<TableCardBody>
<tr>
<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>
<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>
</TableCardBody>
@ -192,7 +192,7 @@ function TpsBarChart({ performanceInfo }: TpsBarChartProps) {
<button
key={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,
})}
>

View File

@ -52,7 +52,7 @@ const renderAccountRow = (entry: RecentBlockhashesEntry, index: number) => {
return (
<tr key={index}>
<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="">
{entry.feeCalculator.lamportsPerSignature} lamports per signature
</td>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -17,7 +17,7 @@ export function AccountHeader({ title, refresh }: AccountHeaderProps) {
<div className="card-header align-items-center">
<h3 className="card-header-title">{title}</h3>
<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
</button>
</div>
@ -28,7 +28,7 @@ export function AccountAddressRow({ account }: AccountProps) {
return (
<tr>
<td>Address</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={account.pubkey} alignRight raw />
</td>
</tr>
@ -40,7 +40,7 @@ export function AccountBalanceRow({ account }: AccountProps) {
return (
<tr>
<td>Balance (SOL)</td>
<td className="text-lg-right text-uppercase">
<td className="text-lg-end text-uppercase">
<SolBalance lamports={lamports} />
</td>
</tr>

View File

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

View File

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

View File

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

View File

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

View File

@ -19,7 +19,7 @@ export function ErrorCard({
{retry && (
<>
<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}
>
{buttonText}

View File

@ -40,7 +40,7 @@ export function HexData({ raw }: { raw: Buffer }) {
function Content() {
return (
<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>
);
}

View File

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

View File

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

View File

@ -4,7 +4,7 @@ export function LoadingCard({ message }: { message?: string }) {
return (
<div className="card">
<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"}
</div>
</div>

View File

@ -5,5 +5,11 @@ type 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>
);
}

View File

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

View File

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

View File

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

View File

@ -59,7 +59,7 @@ export function InstructionCard({
<div className="card">
<div className="card-header">
<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}
{childIndex !== undefined ? `.${childIndex + 1}` : ""}
</span>
@ -73,7 +73,7 @@ export function InstructionCard({
}`}
onClick={rawClickHandler}
>
<span className="fe fe-code mr-1"></span>
<span className="fe fe-code me-1"></span>
Raw
</button>
</div>
@ -84,7 +84,7 @@ export function InstructionCard({
<>
<tr>
<td>Program</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={ix.programId} alignRight link />
</td>
</tr>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -80,7 +80,7 @@ function renderDetails<T>(
value = <Address pubkey={value} alignRight link />;
} else if (key === "bytes") {
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)}{" "}
{key === "bytes" && <span className="text-muted">(Base 64)</span>}
</td>
<td className="text-lg-right">{value}</td>
<td className="text-lg-end">{value}</td>
</tr>
);
}
@ -102,7 +102,7 @@ function renderDetails<T>(
>
<tr>
<td>Program</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={props.ix.programId} alignRight link />
</td>
</tr>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -25,83 +25,83 @@ export function NewOrderDetailsCard(props: {
>
<tr>
<td>Program</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.programId} alignRight link />
</td>
</tr>
<tr>
<td>Market</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.market} alignRight link />
</td>
</tr>
<tr>
<td>Open Orders</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.openOrders} alignRight link />
</td>
</tr>
<tr>
<td>Request Queue</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.requestQueue} alignRight link />
</td>
</tr>
<tr>
<td>Payer</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.payer} alignRight link />
</td>
</tr>
<tr>
<td>Open Orders Owner</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.openOrdersOwner} alignRight link />
</td>
</tr>
<tr>
<td>Base Vault</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.baseVault} alignRight link />
</td>
</tr>
<tr>
<td>Quote Vault</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.accounts.quoteVault} alignRight link />
</td>
</tr>
<tr>
<td>Side</td>
<td className="text-lg-right">{info.data.side}</td>
<td className="text-lg-end">{info.data.side}</td>
</tr>
<tr>
<td>Order Type</td>
<td className="text-lg-right">{info.data.orderType}</td>
<td className="text-lg-end">{info.data.orderType}</td>
</tr>
<tr>
<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>
<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>
<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>
</InstructionCard>
);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -29,21 +29,21 @@ export function AllocateDetailsCard(props: {
>
<tr>
<td>Program</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={SystemProgram.programId} alignRight link />
</td>
</tr>
<tr>
<td>Account Address</td>
<td className="text-lg-right">
<td className="text-lg-end">
<Address pubkey={info.account} alignRight link />
</td>
</tr>
<tr>
<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>
</InstructionCard>
);

View File

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

View File

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

View File

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

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