Merge pull request #57 from ar-io/PE-6461-updated-hardcoded-t-io-and-…

…use-value-from-sdk-get-info-ticker-value

PE-6461: update to use ticker value from SDK

src/components/GlobalDataProvider.tsx

@@ -11,11 +11,16 @@ const GlobalDataProvider = ({
 
   const setBlockHeight = useGlobalState((state) => state.setBlockHeight);
   const setCurrentEpoch = useGlobalState((state) => state.setCurrentEpoch);
+  const setTicker = useGlobalState((state) => state.setTicker);
   const arweave = useGlobalState((state) => state.arweave);
   const arioReadSDK = useGlobalState((state) => state.arIOReadSDK);
 
   useEffectOnce(() => {
     const update = async () => {
+      // perform this first as retrieving the current epic takes some time 
+      const {Ticker} = await arioReadSDK.getInfo();
+      setTicker(Ticker);
+
       const currentEpoch = await arioReadSDK.getCurrentEpoch();
       setCurrentEpoch(currentEpoch);
     };

src/components/Profile.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable tailwindcss/migration-from-tailwind-2 */
 import { Popover } from '@headlessui/react';
-import { IO_LABEL } from '@src/constants';
 import { useGlobalState } from '@src/store';
 import { formatBalance, formatWalletAddress } from '@src/utils';
 import { forwardRef, useState } from 'react';
@@ -40,6 +39,7 @@ const Profile = () => {
   const balances = useGlobalState((state) => state.balances);
   const updateWallet = useGlobalState((state) => state.updateWallet);
   const walletAddress = useGlobalState((state) => state.walletAddress);
+  const ticker = useGlobalState((state) => state.ticker);
 
   return walletAddress ? (
     <Popover className="relative">
@@ -74,7 +74,7 @@ const Profile = () => {
           <CopyButton textToCopy={walletAddress.toString()} />
         </div>
         <div className="mx-[16px] rounded-[6px] border border-grey-800 py-[12px]">
-          <div className="px-[16px] text-xs text-low">{IO_LABEL} Balance</div>
+          <div className="px-[16px] text-xs text-low">{ticker} Balance</div>
           <div className="border-b border-grey-800 px-[16px] pb-[12px] pt-[4px] text-high">
             {formatBalance(balances.io)}
           </div>

src/components/forms/validation.ts

@@ -1,5 +1,4 @@
 import { ARWEAVE_TX_REGEX, FQDN_REGEX } from '@ar.io/sdk/web';
-import { IO_LABEL } from '@src/constants';
 
 /* Higher-order functions that return a FormValidationFunction for use with FormRowDefs */
 
@@ -49,6 +48,7 @@ export const validateTransactionId = (
 
 export const validateIOAmount = (
   propertyName: string,
+  ticker: string,
   min: number,
   max?: number,
 ): FormValidationFunction => {
@@ -59,15 +59,15 @@ export const validateIOAmount = (
       if (isNaN(value)) {
         return `${propertyName} must be a number.`;
       } else if (max <= min && value < min) {
-        return `${propertyName} must be a number >= ${min} ${IO_LABEL}.`;
+        return `${propertyName} must be a number >= ${min} ${ticker}.`;
       }
 
       return value < min || value > max
-        ? `${propertyName} must be a number from ${min} to ${max} ${IO_LABEL}.`
+        ? `${propertyName} must be a number from ${min} to ${max} ${ticker}.`
         : undefined;
     }
     return value < min || isNaN(value)
-      ? `${propertyName} must be a number >= ${min} ${IO_LABEL}.`
+      ? `${propertyName} must be a number >= ${min} ${ticker}.`
       : undefined;
   };
 };
@@ -88,6 +88,7 @@ export const validateNumberRange = (
 
 export const validateUnstakeAmount = (
   propertyName: string,
+  ticker: string,
   currentStake: number,
   minDelegatedStake: number,
 ): FormValidationFunction => {
@@ -99,19 +100,19 @@ export const validateUnstakeAmount = (
     }
 
     if (value < 1) {
-      return `${propertyName} must be at least 1 ${IO_LABEL}.`;
+      return `${propertyName} must be at least 1 ${ticker}.`;
     }
 
     if (value > currentStake) {
-      return `${propertyName} cannot be greater than your current stake of ${currentStake} ${IO_LABEL}.`;
+      return `${propertyName} cannot be greater than your current stake of ${currentStake} ${ticker}.`;
     }
 
     if (
       currentStake - value < minDelegatedStake &&
       value != minDelegatedStake &&
       value != currentStake
     ) {
-      return `Withdrawing this amount will put you below the gateway's minimum stake of ${minDelegatedStake} ${IO_LABEL}. You can either: withdraw a smaller amount so your remaining stake is above the minimum - or - withdraw your full delegated stake.`;
+      return `Withdrawing this amount will put you below the gateway's minimum stake of ${minDelegatedStake} ${ticker}. You can either: withdraw a smaller amount so your remaining stake is above the minimum - or - withdraw your full delegated stake.`;
     }
 
     return undefined;

src/components/modals/StakingModal.tsx

@@ -2,7 +2,6 @@ import { IOToken, mIOToken } from '@ar.io/sdk/web';
 import {
   EAY_TOOLTIP_FORMULA,
   EAY_TOOLTIP_TEXT,
-  IO_LABEL,
   WRITE_OPTIONS,
   log,
 } from '@src/constants';
@@ -77,6 +76,7 @@ const StakingModal = ({
   const balances = useGlobalState((state) => state.balances);
   const walletAddress = useGlobalState((state) => state.walletAddress);
   const arIOWriteableSDK = useGlobalState((state) => state.arIOWriteableSDK);
+  const ticker = useGlobalState((state) => state.ticker);
 
   const [tab, setTab] = useState<number>(0);
   const [userEnteredWalletAddress, setUserEnteredWalletAddress] =
@@ -130,11 +130,13 @@ const StakingModal = ({
     address: validateWalletAddress('Gateway Owner'),
     stakeAmount: validateIOAmount(
       'Stake Amount',
+      ticker,
       minRequiredStakeToAdd,
       balances.io,
     ),
     unstakeAmount: validateUnstakeAmount(
       'Unstake Amount',
+      ticker,
       existingStake,
       minDelegatedStake,
     ),
@@ -273,8 +275,8 @@ const StakingModal = ({
             <div className="text-left text-xs text-low">
               {tab == 0
                 ? balances &&
-                  `Available: ${formatWithCommas(balances.io)} ${IO_LABEL}`
-                : `Available to Unstake: ${formatWithCommas(currentStake)} ${IO_LABEL}`}
+                  `Available: ${formatWithCommas(balances.io)} ${ticker}`
+                : `Available to Unstake: ${formatWithCommas(currentStake)} ${ticker}`}
             </div>
           </div>
           <div className="mt-3 flex h-[52px] items-center overflow-hidden rounded-md border border-grey-800">
@@ -285,7 +287,7 @@ const StakingModal = ({
               disabled={disableInput}
               readOnly={disableInput}
               type="text"
-              placeholder={`Enter amount of ${IO_LABEL} to ${tab == 0 ? 'stake' : 'unstake'}`}
+              placeholder={`Enter amount of ${ticker} to ${tab == 0 ? 'stake' : 'unstake'}`}
               value={tab == 0 ? amountToStake : amountToUnstake}
               onChange={(e) => {
                 const textValue = e.target.value;
@@ -336,7 +338,7 @@ const StakingModal = ({
               <DisplayRow
                 className="border-b border-divider pb-[16px]"
                 label="Existing Stake:"
-                value={`${existingStake} ${IO_LABEL}`}
+                value={`${existingStake} ${ticker}`}
               />
             )}
             <DisplayRow
@@ -386,7 +388,7 @@ const StakingModal = ({
             <DisplayRow
               className="py-[4px]"
               label="Remaining Balance:"
-              value={`${remainingBalance !== '-' ? formatWithCommas(+remainingBalance) : remainingBalance} ${IO_LABEL}`}
+              value={`${remainingBalance !== '-' ? formatWithCommas(+remainingBalance) : remainingBalance} ${ticker}`}
             />
           )}
           <DisplayRow
@@ -398,7 +400,7 @@ const StakingModal = ({
                   ? formatWithCommas(currentStake + parseFloat(amountToStake))
                   : formatWithCommas(currentStake - parseFloat(amountToUnstake))
                 : '-'
-            } ${IO_LABEL}`}
+            } ${ticker}`}
           />
           <div
             className={
@@ -409,8 +411,8 @@ const StakingModal = ({
               className="mt-[32px] h-[52px] w-full"
               onClick={submitForm}
               buttonType={ButtonType.PRIMARY}
-              title={tab == 0 ? `Stake ${IO_LABEL}` : `Unstake ${IO_LABEL}`}
-              text={tab == 0 ? `Stake ${IO_LABEL}` : `Unstake ${IO_LABEL}`}
+              title={tab == 0 ? `Stake ${ticker}` : `Unstake ${ticker}`}
+              text={tab == 0 ? `Stake ${ticker}` : `Unstake ${ticker}`}
             />
           </div>
         </div>

src/components/modals/StartGatewayModal.tsx

@@ -1,5 +1,5 @@
 import { IOToken } from '@ar.io/sdk/web';
-import { IO_LABEL, WRITE_OPTIONS, log } from '@src/constants';
+import { WRITE_OPTIONS, log } from '@src/constants';
 import { useGlobalState } from '@src/store';
 import { showErrorToast } from '@src/utils/toast';
 import { useQueryClient } from '@tanstack/react-query';
@@ -41,6 +41,7 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
 
   const walletAddress = useGlobalState((state) => state.walletAddress);
   const arioWriteableSDK = useGlobalState((state) => state.arIOWriteableSDK);
+  const ticker = useGlobalState((state) => state.ticker);
 
   const [formState, setFormState] =
     useState<Record<string, string | boolean>>(DEFAULT_FORM_STATE);
@@ -89,22 +90,22 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
     },
     {
       formPropertyName: 'stake',
-      label: `*Stake (${IO_LABEL}):`,
-      placeholder: `Minimum 50000 ${IO_LABEL}`,
-      validateProperty: validateIOAmount('Stake', 50000),
+      label: `*Stake (${ticker}):`,
+      placeholder: `Minimum 50000 ${ticker}`,
+      validateProperty: validateIOAmount('Stake', ticker, 50000),
     },
     {
       formPropertyName: 'allowDelegatedStaking',
       label: 'Delegated Staking:',
     },
     {
       formPropertyName: 'minDelegatedStake',
-      label: `Minimum Delegated Stake (${IO_LABEL}):`,
+      label: `Minimum Delegated Stake (${ticker}):`,
       enabled: allowDelegatedStaking,
       placeholder: allowDelegatedStaking
-        ? `Minimum 500 ${IO_LABEL}`
+        ? `Minimum 500 ${ticker}`
         : 'Enable Delegated Staking to set this value.',
-      validateProperty: validateIOAmount('Minimum Delegated Stake', 500),
+      validateProperty: validateIOAmount('Minimum Delegated Stake', ticker, 500),
     },
     {
       formPropertyName: 'delegatedStakingShareRatio',

src/components/modals/UnstakeAllModal.tsx

@@ -1,5 +1,5 @@
 import { AoGateway, mIOToken } from '@ar.io/sdk/web';
-import { IO_LABEL, WRITE_OPTIONS, log } from '@src/constants';
+import { WRITE_OPTIONS, log } from '@src/constants';
 import { useGlobalState } from '@src/store';
 import { showErrorToast } from '@src/utils/toast';
 import { useState } from 'react';
@@ -25,6 +25,7 @@ const UnstakeAllModal = ({
 
   const walletAddress = useGlobalState((state) => state.walletAddress);
   const arIOWriteableSDK = useGlobalState((state) => state.arIOWriteableSDK);
+  const ticker = useGlobalState((state) => state.ticker);
 
   const sorted = activeStakes.sort(
     (a, b) => b.delegatedStake - a.delegatedStake,
@@ -105,7 +106,7 @@ const UnstakeAllModal = ({
                   </td>
                   <td className="py-[8px] text-right text-mid ">
                     {new mIOToken(stake.delegatedStake).toIO().valueOf()}{' '}
-                    {IO_LABEL}
+                    {ticker}
                   </td>
                 </tr>
               ))}
@@ -122,7 +123,7 @@ const UnstakeAllModal = ({
             <div className="mt-[4px] flex text-sm text-mid">
               <div className="grow">Total Withdrawal:</div>
               <div>
-                {new mIOToken(totalWithdrawalMIO).toIO().valueOf()} {IO_LABEL}
+                {new mIOToken(totalWithdrawalMIO).toIO().valueOf()} {ticker}
               </div>
             </div>
 

src/constants.ts

@@ -49,5 +49,3 @@ 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';

src/hooks/useGatewayInfo.ts

@@ -1,5 +1,4 @@
 import { mIOToken } from '@ar.io/sdk/web';
-import { IO_LABEL } from '@src/constants';
 import { useGlobalState } from '@src/store';
 import { formatDate, formatWalletAddress, formatWithCommas } from '@src/utils';
 import useGateway from './useGateway';
@@ -12,6 +11,7 @@ export enum GatewayStatus {
 
 export const useGatewayInfo = () => {
   const walletAddress = useGlobalState((state) => state.walletAddress);
+  const ticker = useGlobalState((state) => state.ticker);
   const { isLoading, data: gateway } = useGateway({
     ownerWalletAddress: walletAddress?.toString(),
   });
@@ -28,7 +28,7 @@ export const useGatewayInfo = () => {
       ['Observer Wallet', formatWalletAddress(gateway.observerAddress)],
       ['Joined at', formatDate(new Date(gateway.startTimestamp))],
       [
-        `Stake (${IO_LABEL})`,
+        `Stake (${ticker})`,
         formatWithCommas(new mIOToken(gateway.operatorStake).toIO().valueOf()),
       ],
       ['Status', gateway.status],

src/pages/Gateway/PropertyDisplayPanel.tsx

@@ -3,7 +3,6 @@ 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';
 
@@ -69,6 +68,7 @@ const PropertyDisplayPanel = ({
   gateway?: AoGateway;
 }) => {
   const walletAddress = useGlobalState((state) => state.walletAddress);
+  const ticker = useGlobalState((state) => state.ticker);
 
   const [stakingModalWalletAddress, setStakingModalWalletAddress] =
     useState<string>();
@@ -86,7 +86,7 @@ const PropertyDisplayPanel = ({
           value: `${gateway?.settings.delegateRewardShareRatio}%`,
         },
         {
-          label: `Minimum Delegated Stake (${IO_LABEL}):`,
+          label: `Minimum Delegated Stake (${ticker}):`,
           value: new mIOToken(gateway?.settings.minDelegatedStake || 0)
             .toIO()
             .valueOf(),
@@ -109,15 +109,15 @@ const PropertyDisplayPanel = ({
       type: 'tx',
     },
     {
-      label: `Gateway Stake (${IO_LABEL}):`,
+      label: `Gateway Stake (${ticker}):`,
       value: gateway?.operatorStake
         ? new mIOToken(gateway?.operatorStake).toIO().valueOf()
         : undefined,
     },
     { label: 'Status:', value: gateway?.status },
     { label: 'Note:', value: gateway?.settings.note },
     {
-      label: `Total Delegated Stake (${IO_LABEL}):`,
+      label: `Total Delegated Stake (${ticker}):`,
       value: new mIOToken(gateway?.totalDelegatedStake || 0).toIO().valueOf(),
     },
     { label: 'Reward Auto Stake:', value: gateway?.settings.autoStake },

src/pages/Gateway/index.tsx

@@ -18,7 +18,7 @@ import {
 import { EditIcon, StatsArrowIcon } from '@src/components/icons';
 import BlockingMessageModal from '@src/components/modals/BlockingMessageModal';
 import SuccessModal from '@src/components/modals/SuccessModal';
-import { IO_LABEL, WRITE_OPTIONS, log } from '@src/constants';
+import { WRITE_OPTIONS, log } from '@src/constants';
 import useGateway from '@src/hooks/useGateway';
 import useHealthcheck from '@src/hooks/useHealthCheck';
 import { useGlobalState } from '@src/store';
@@ -67,6 +67,7 @@ const Gateway = () => {
   const walletAddress = useGlobalState((state) => state.walletAddress);
   const arIOWriteableSDK = useGlobalState((state) => state.arIOWriteableSDK);
   const balances = useGlobalState((state) => state.balances);
+  const ticker = useGlobalState((state) => state.ticker);
 
   const params = useParams();
 
@@ -187,10 +188,10 @@ const Gateway = () => {
     },
     {
       formPropertyName: 'stake',
-      label: `Gateway Stake (${IO_LABEL}):`,
+      label: `Gateway Stake (${ticker}):`,
       rowType: RowType.BOTTOM,
-      placeholder: `Minimum 50000 ${IO_LABEL}`,
-      validateProperty: validateIOAmount('Stake', 50000, maxStake),
+      placeholder: `Minimum 50000 ${ticker}`,
+      validateProperty: validateIOAmount('Stake', ticker, 50000, maxStake),
     },
     {
       formPropertyName: 'status',
@@ -206,7 +207,7 @@ const Gateway = () => {
     },
     {
       formPropertyName: 'delegatedStake',
-      label: `Total Delegated Stake (${IO_LABEL}):`,
+      label: `Total Delegated Stake (${ticker}):`,
       rowType: RowType.SINGLE,
       readOnly: true,
     },
@@ -232,13 +233,13 @@ const Gateway = () => {
     },
     {
       formPropertyName: 'minDelegatedStake',
-      label: `Minimum Delegated Stake (${IO_LABEL}):`,
+      label: `Minimum Delegated Stake (${ticker}):`,
       rowType: RowType.LAST,
       enabled: delegatedStakingEnabled,
       placeholder: delegatedStakingEnabled
-        ? `Minimum 500 ${IO_LABEL}`
+        ? `Minimum 500 ${ticker}`
         : 'Enable Delegated Staking to set this value.',
-      validateProperty: validateIOAmount('Minumum Delegated Stake ', 500),
+      validateProperty: validateIOAmount('Minumum Delegated Stake', ticker, 500),
     },
   ];