+
{showCloseButton && (
)}
- {children}
+
+ {children}
+
diff --git a/src/components/modals/StakingModal.tsx b/src/components/modals/StakingModal.tsx
index 18535869..ec2609d0 100644
--- a/src/components/modals/StakingModal.tsx
+++ b/src/components/modals/StakingModal.tsx
@@ -1,11 +1,18 @@
import { IOToken, mIOToken } from '@ar.io/sdk/web';
-import { EAY_TOOLTIP_TEXT, IO_LABEL, WRITE_OPTIONS, log } from '@src/constants';
+import {
+ EAY_TOOLTIP_FORMULA,
+ EAY_TOOLTIP_TEXT,
+ IO_LABEL,
+ WRITE_OPTIONS,
+ log,
+} from '@src/constants';
import useGateway from '@src/hooks/useGateway';
import useRewardsInfo from '@src/hooks/useRewardsInfo';
import { useGlobalState } from '@src/store';
import { formatWithCommas } from '@src/utils';
import { showErrorToast } from '@src/utils/toast';
import { useQueryClient } from '@tanstack/react-query';
+import { MathJax } from 'better-react-mathjax';
import { useState } from 'react';
import Button, { ButtonType } from '../Button';
import Tooltip from '../Tooltip';
@@ -265,7 +272,8 @@ const StakingModal = ({
{tab == 0
- ? balances && `Available: ${formatWithCommas(balances.io)} ${IO_LABEL}`
+ ? balances &&
+ `Available: ${formatWithCommas(balances.io)} ${IO_LABEL}`
: `Available to Unstake: ${formatWithCommas(currentStake)} ${IO_LABEL}`}
{EAY_TOOLTIP_TEXT}
+ {EAY_TOOLTIP_FORMULA}
+
+ }
+ >
}
/>
-
+
-
diff --git a/src/constants.ts b/src/constants.ts
index 0d956a93..a5270169 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -47,5 +47,7 @@ export const log = loglevel;
export const EAY_TOOLTIP_TEXT =
'EAY = Estimated yield ratio determined by projecting the current nominal reward conditions over the course of a year. Does NOT include potential observation rewards.';
+export const EAY_TOOLTIP_FORMULA =
+ '\\(EAY = \\frac{RewardsSharedPerEpoch}{TotalDelegatedStake} * EpochsPerYear\\)';
export const IO_LABEL = 'tIO';
diff --git a/src/pages/Gateway/PropertyDisplayPanel.tsx b/src/pages/Gateway/PropertyDisplayPanel.tsx
index f3f08667..137c6647 100644
--- a/src/pages/Gateway/PropertyDisplayPanel.tsx
+++ b/src/pages/Gateway/PropertyDisplayPanel.tsx
@@ -1,15 +1,22 @@
import { AoGateway, mIOToken } from '@ar.io/sdk/web';
+import Button, { ButtonType } from '@src/components/Button';
import Placeholder from '@src/components/Placeholder';
+import ConnectModal from '@src/components/modals/ConnectModal';
+import StakingModal from '@src/components/modals/StakingModal';
import { IO_LABEL } from '@src/constants';
+import { useGlobalState } from '@src/store';
+import { useState } from 'react';
const DisplayRow = ({
label,
value,
type,
+ rightComponent,
}: {
label: string;
value: string | number | boolean | undefined;
type?: string;
+ rightComponent?: React.ReactNode;
}) => {
return (
<>
@@ -22,9 +29,12 @@ const DisplayRow = ({
{value === undefined ? (
) : typeof value === 'boolean' ? (
-
- {value ? 'Enabled' : 'Disabled'}
-
+
+
+ {value ? 'Enabled' : 'Disabled'}
+
+ {rightComponent}
+
) : type == 'address' || type == 'tx' ? (
{
+ const walletAddress = useGlobalState((state) => state.walletAddress);
+
+ const [stakingModalWalletAddress, setStakingModalWalletAddress] =
+ useState();
+
+ const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
+
const gatewayAddress = gateway
? `${gateway.settings.protocol}://${gateway.settings.fqdn}:${gateway.settings.port}`
: undefined;
@@ -66,7 +83,7 @@ const PropertyDisplayPanel = ({
? [
{
label: 'Reward Share Ratio:',
- value: gateway?.settings.delegateRewardShareRatio,
+ value: `${gateway?.settings.delegateRewardShareRatio}%`,
},
{
label: `Minimum Delegated Stake (${IO_LABEL}):`,
@@ -107,15 +124,49 @@ const PropertyDisplayPanel = ({
{
label: 'Delegated Staking:',
value: gateway?.settings.allowDelegatedStaking,
+ rightComponent: gateway?.settings.allowDelegatedStaking ? (
+
- Total Delegated Stake:{' '}
+ Delegated Stake:{' '}
{formatWithCommas(row.original.totalDelegatedStake)} {IO_LABEL}
@@ -136,7 +138,8 @@ const Gateways = () => {
id: 'rewardRatio',
header: 'Reward Share Ratio',
sortDescFirst: true,
- cell: ({ row }) => `${row.original.rewardRatio}%`,
+ cell: ({ row }) =>
+ row.original.rewardRatio >= 0 ? `${row.original.rewardRatio}%` : 'N/A',
}),
columnHelper.accessor('streak', {
id: 'streak',
diff --git a/src/pages/Staking/DelegateStakeTable.tsx b/src/pages/Staking/DelegateStakeTable.tsx
index 1decb9e0..371f79f8 100644
--- a/src/pages/Staking/DelegateStakeTable.tsx
+++ b/src/pages/Staking/DelegateStakeTable.tsx
@@ -6,13 +6,18 @@ import Tooltip from '@src/components/Tooltip';
import { InfoIcon } from '@src/components/icons';
import ConnectModal from '@src/components/modals/ConnectModal';
import StakingModal from '@src/components/modals/StakingModal';
-import { EAY_TOOLTIP_TEXT } from '@src/constants';
+import {
+ EAY_TOOLTIP_FORMULA,
+ EAY_TOOLTIP_TEXT,
+ IO_LABEL,
+} from '@src/constants';
import useGateways from '@src/hooks/useGateways';
import useProtocolBalance from '@src/hooks/useProtocolBalance';
import { useGlobalState } from '@src/store';
import { formatWithCommas } from '@src/utils';
import { calculateGatewayRewards } from '@src/utils/rewards';
import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import { MathJax } from 'better-react-mathjax';
import { useEffect, useState } from 'react';
interface TableData {
@@ -22,6 +27,8 @@ interface TableData {
failedConsecutiveEpochs: number;
rewardRatio: number;
totalDelegatedStake: number;
+ totalStake: number;
+ operatorStake: number;
eay: number;
}
@@ -57,9 +64,19 @@ const DelegateStake = () => {
failedConsecutiveEpochs:
gateway.stats.failedConsecutiveEpochs,
rewardRatio: gateway.settings.delegateRewardShareRatio,
+
totalDelegatedStake: new mIOToken(gateway.totalDelegatedStake)
.toIO()
.valueOf(),
+ operatorStake: new mIOToken(gateway.operatorStake)
+ .toIO()
+ .valueOf(),
+ totalStake: new mIOToken(
+ gateway.totalDelegatedStake + gateway.operatorStake,
+ )
+ .toIO()
+ .valueOf(),
+
eay: calculateGatewayRewards(
new mIOToken(protocolBalance).toIO(),
Object.keys(gateways).length,
@@ -102,10 +119,28 @@ const DelegateStake = () => {
sortDescFirst: false,
cell: ({ row }) => ,
}),
- columnHelper.accessor('totalDelegatedStake', {
- id: 'totalDelegatedStake',
- header: 'Total Stake',
+ columnHelper.accessor('totalStake', {
+ id: 'totalStake',
+ header: `Total Stake (${IO_LABEL})`,
sortDescFirst: true,
+ cell: ({ row }) => (
+
+
+ Operator Stake: {formatWithCommas(row.original.operatorStake)}{' '}
+ {IO_LABEL}
+
+
+ Delegated Stake:{' '}
+ {formatWithCommas(row.original.totalDelegatedStake)} {IO_LABEL}
+
+
+ }
+ >
+ {formatWithCommas(row.getValue('totalStake'))}
+
+ ),
}),
columnHelper.accessor('failedConsecutiveEpochs', {
id: 'failedConsecutiveEpochs',
@@ -123,7 +158,14 @@ const DelegateStake = () => {
header: () => (
EAY
-
+
+ {EAY_TOOLTIP_TEXT}
+ {EAY_TOOLTIP_FORMULA}
+