Merge pull request #140 from ar-io/PE-7517-quick-wins-v-1-8-0

PE-7517: quick wins v1.8.0
ar-io · Jan 28, 2025 · b90af8c · b90af8c
2 parents b459956 + a89f33f
commit b90af8c
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,8 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Show ArNS ANT Logo in profile if user is using primary name
 - Applications Settings: use new sidebar Settings option to open modal to
   configure ARIO Process ID and AO CU URL
+- Added copy button for domain name columns in tables
+- Show Delegate EAY for gateways in Active Stakes table
 
 ### Changed
 

diff --git a/src/pages/Gateways/index.tsx b/src/pages/Gateways/index.tsx
@@ -1,5 +1,6 @@
 import { mARIOToken } from '@ar.io/sdk/web';
 import AddressCell from '@src/components/AddressCell';
+import CopyButton from '@src/components/CopyButton';
 import Header from '@src/components/Header';
 import Streak from '@src/components/Streak';
 import TableView from '@src/components/TableView';
@@ -54,7 +55,9 @@ const Gateways = () => {
             totalDelegatedStake: new mARIOToken(gateway.totalDelegatedStake)
               .toARIO()
               .valueOf(),
-            operatorStake: new mARIOToken(gateway.operatorStake).toARIO().valueOf(),
+            operatorStake: new mARIOToken(gateway.operatorStake)
+              .toARIO()
+              .valueOf(),
             totalStake: new mARIOToken(
               gateway.totalDelegatedStake + gateway.operatorStake,
             )
@@ -92,17 +95,19 @@ const Gateways = () => {
       header: 'Domain',
       sortDescFirst: false,
       cell: ({ row }) => (
-        <div className="text-gradient">
+        <div className="flex items-center gap-2">
           <a
             href={`https://${row.getValue('domain')}`}
             target="_blank"
             rel="noreferrer"
             onClick={(e) => {
               e.stopPropagation();
             }}
+            className="text-gradient"
           >
             {row.getValue('domain')}
-          </a>{' '}
+          </a>
+          <CopyButton textToCopy={row.getValue('domain')} />
         </div>
       ),
     }),

diff --git a/src/pages/Observers/ObserversTable.tsx b/src/pages/Observers/ObserversTable.tsx
@@ -1,4 +1,5 @@
 import AddressCell from '@src/components/AddressCell';
+import CopyButton from '@src/components/CopyButton';
 import Dropdown from '@src/components/Dropdown';
 import TableView from '@src/components/TableView';
 import useEpochs from '@src/hooks/useEpochs';
@@ -98,15 +99,19 @@ const ObserversTable = () => {
       header: 'Domain',
       sortDescFirst: false,
       cell: ({ row }) => (
-        <div className="text-gradient">
+        <div className="flex items-center gap-2">
           <a
             href={`https://${row.getValue('domain')}`}
             target="_blank"
             rel="noreferrer"
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="text-gradient"
           >
             {row.getValue('domain')}
-          </a>{' '}
+          </a>
+          <CopyButton textToCopy={row.getValue('domain')} />
         </div>
       ),
     }),

diff --git a/src/pages/Staking/DelegateStakeTable.tsx b/src/pages/Staking/DelegateStakeTable.tsx
@@ -1,6 +1,7 @@
 import { mARIOToken } from '@ar.io/sdk/web';
 import AddressCell from '@src/components/AddressCell';
 import Button, { ButtonType } from '@src/components/Button';
+import CopyButton from '@src/components/CopyButton';
 import Streak from '@src/components/Streak';
 import TableView from '@src/components/TableView';
 import Tooltip from '@src/components/Tooltip';
@@ -125,15 +126,19 @@ const DelegateStake = () => {
       header: 'Domain',
       sortDescFirst: false,
       cell: ({ row }) => (
-        <div className="text-gradient">
+        <div className="flex items-center gap-2">
           <a
             href={`https://${row.getValue('domain')}`}
             target="_blank"
             rel="noreferrer"
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="text-gradient"
           >
             {row.getValue('domain')}
-          </a>{' '}
+          </a>
+          <CopyButton textToCopy={row.getValue('domain')} />
         </div>
       ),
     }),

diff --git a/src/pages/Staking/MyStakesTable.tsx b/src/pages/Staking/MyStakesTable.tsx
@@ -2,10 +2,12 @@ import { AoGatewayWithAddress, AoVaultData, mARIOToken } from '@ar.io/sdk/web';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import AddressCell from '@src/components/AddressCell';
 import Button, { ButtonType } from '@src/components/Button';
+import CopyButton from '@src/components/CopyButton';
 import Dropdown from '@src/components/Dropdown';
 import Streak from '@src/components/Streak';
 import TableView from '@src/components/TableView';
-import { ThreeDotsIcon } from '@src/components/icons';
+import Tooltip from '@src/components/Tooltip';
+import { InfoIcon, ThreeDotsIcon } from '@src/components/icons';
 import CancelWithdrawalModal from '@src/components/modals/CancelWithdrawalModal';
 import InstantWithdrawalModal from '@src/components/modals/InstantWithdrawalModal';
 import RedelegateModal, {
@@ -14,10 +16,15 @@ import RedelegateModal, {
 import StakeWithdrawalModal from '@src/components/modals/StakeWithdrawalModal';
 import StakingModal from '@src/components/modals/StakingModal';
 import WithdrawAllModal from '@src/components/modals/WithdrawAllModal';
+import { EAY_TOOLTIP_FORMULA, EAY_TOOLTIP_TEXT } from '@src/constants';
 import useDelegateStakes from '@src/hooks/useDelegateStakes';
 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 dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -28,6 +35,7 @@ interface ActiveStakesTableData {
   gateway: AoGatewayWithAddress;
   pendingWithdrawals: number;
   streak: number;
+  eay: number;
 }
 
 interface PendingWithdrawalsTableData {
@@ -79,10 +87,12 @@ const MyStakesTable = () => {
 
   const { data: delegateStakes } = useDelegateStakes(walletAddress?.toString());
 
+  const { data: protocolBalance } = useProtocolBalance();
+
   useEffect(() => {
     const activeStakes: Array<ActiveStakesTableData> | undefined = isFetching
       ? undefined
-      : !delegateStakes || !gateways
+      : !delegateStakes || !gateways || !protocolBalance
         ? []
         : delegateStakes.stakes
             .filter((stake) => stake.balance > 0)
@@ -101,6 +111,12 @@ const MyStakesTable = () => {
                     : gateway.stats.failedConsecutiveEpochs > 0
                       ? -gateway.stats.failedConsecutiveEpochs
                       : gateway.stats.passedConsecutiveEpochs,
+                eay: calculateGatewayRewards(
+                  new mARIOToken(protocolBalance).toARIO(),
+                  Object.values(gateways).filter((g) => g.status == 'joined')
+                    .length,
+                  gateway,
+                ).EAY,
               };
             });
 
@@ -125,7 +141,7 @@ const MyStakesTable = () => {
 
     setActiveStakes(activeStakes);
     setPendingWithdrawals(pendingWithdrawals);
-  }, [delegateStakes, gateways, isFetching]);
+  }, [delegateStakes, gateways, isFetching, protocolBalance]);
 
   // Define columns for the active stakes table
   const activeStakesColumns: ColumnDef<ActiveStakesTableData, any>[] = [
@@ -139,15 +155,19 @@ const MyStakesTable = () => {
       header: 'Domain',
       sortDescFirst: false,
       cell: ({ row }) => (
-        <div className="text-gradient">
+        <div className="flex items-center gap-2">
           <a
             href={`https://${row.getValue('domain')}`}
             target="_blank"
             rel="noreferrer"
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="text-gradient"
           >
             {row.getValue('domain')}
-          </a>{' '}
+          </a>
+          <CopyButton textToCopy={row.getValue('domain')} />
         </div>
       ),
     }),
@@ -165,6 +185,32 @@ const MyStakesTable = () => {
         return `${new mARIOToken(row.original.delegatedStake).toARIO().valueOf()}`;
       },
     }),
+    columnHelper.accessor('eay', {
+      id: 'eay',
+      header: () => (
+        <div className="flex gap-1">
+          Delegate EAY
+          <Tooltip
+            message={
+              <div>
+                <p>{EAY_TOOLTIP_TEXT}</p>
+                <MathJax className="mt-4">{EAY_TOOLTIP_FORMULA}</MathJax>
+              </div>
+            }
+          >
+            <InfoIcon className="h-full" />
+          </Tooltip>
+        </div>
+      ),
+      sortDescFirst: true,
+      cell: ({ row }) => (
+        <div>
+          {row.original.eay < 0
+            ? 'N/A'
+            : `${formatWithCommas(row.original.eay * 100)}%`}
+        </div>
+      ),
+    }),
     columnHelper.accessor('streak', {
       id: 'streak',
       header: 'Streak',