fix: move % on AMM Account Page (#957)

## High Level Overview of Change

This PR moves the `%` in the trading fee for AMM Account pages, and
fixes a couple of deprecated function issues that were noticed in the
process.

### Context of Change

Noticed while looking at an AMM page.

### Type of Change

- [x] Bug fix (non-breaking change which fixes an issue)

### TypeScript/Hooks Update

N/A

## Before / After

Before:
<img width="139" alt="image"
src="https://github.com/ripple/explorer/assets/8029314/b85a2723-32de-4886-b8b4-dbb22f18ec00">

After:
<img width="139" alt="image"
src="https://github.com/ripple/explorer/assets/8029314/45352b76-2f0a-4e35-9c5c-8306a75870e4">

## Test Plan

Works locally.

src/containers/Accounts/AMM/AMMAccounts/AMMAccountHeader/AMMAccountHeader.tsx

@@ -46,7 +46,7 @@ export const AMMAccountHeader = (props: { data: AmmDataType }) => {
           </div>
           <div className="values">
             <div className="title">{t('trading_fee')}</div>
-            <div className="value">%{localizedTradingFee}</div>
+            <div className="value">{localizedTradingFee}%</div>
           </div>
         </div>
       </div>

src/containers/Accounts/AMM/AMMAccounts/AMMAccountHeader/test/AMMAccountHeader.test.tsx

@@ -34,7 +34,7 @@ describe('AMM Account Header', () => {
     expect(wrapper.find('.box-header .title').length).toBe(1)
     expect(wrapper.find('.currency-pair').length).toBe(1)
     expect(wrapper.text().includes('500')).toBe(true)
-    expect(wrapper.text().includes('%0.01')).toBe(true)
+    expect(wrapper.text().includes('0.01%')).toBe(true)
     expect(wrapper.text().includes('XRP.hi/USD.hi')).toBe(true)
     expect(wrapper.text().includes('\uE9001,000')).toBe(true)
     expect(wrapper.text().includes('9,000')).toBe(true)

src/containers/Accounts/AMM/AMMAccounts/index.tsx

@@ -41,7 +41,7 @@ const Page: FC<PropsWithChildren<{ accountId: string }>> = ({
   children,
 }) => (
   <div className="accounts-page">
-    <Helmet title={`AMM ${accountId.substr(0, 12)}...`} />
+    <Helmet title={`AMM ${accountId.substring(0, 12)}...`} />
     {children}
   </div>
 )
@@ -57,7 +57,6 @@ export const AMMAccounts = () => {
   const { data, error } = useQuery([accountId, language], () => {
     let asset1: { currency: string; issuer?: string }
     let asset2: { currency: string; issuer?: string }
-    let ammData: any
 
     /*
     Get the first account transaction which in this case should be AMMCreate. From this we get
@@ -83,7 +82,7 @@ export const AMMAccounts = () => {
             Use the assets to get the AMM Info.
             */
           .then((ammDataWrapper) => {
-            ammData = ammDataWrapper.amm
+            const ammData = ammDataWrapper.amm
             const balance = formatAmount(ammData.amount)
             const balance2 = formatAmount(ammData.amount2)
 
@@ -134,7 +133,7 @@ export const AMMAccounts = () => {
   return (
     <div className="accounts-page section">
       <Helmet>
-        <title>AMM {accountId.substr(0, 12)}...</title>
+        <title>AMM {accountId.substring(0, 12)}...</title>
       </Helmet>
       {data && (
         <>

src/containers/Accounts/index.tsx

@@ -28,7 +28,7 @@ export const Accounts = () => {
 
   return (
     <div className="accounts-page section">
-      <Helmet title={`${accountId.substr(0, 12)}...`} />
+      <Helmet title={`${accountId.substring(0, 12)}...`} />
       {accountId && (
         <>
           <AccountHeader

src/containers/Ledgers/LedgerEntryHash.tsx

@@ -14,7 +14,7 @@ export const LedgerEntryHash = ({
   validators: { [pubkey: string]: ValidatorResponse }
 }) => {
   const { t } = useTranslation()
-  const shortHash = hash.hash.substr(0, 6)
+  const shortHash = hash.hash.substring(0, 6)
   const barStyle = { background: `#${shortHash}` }
   const validated = hash.validated && <SuccessIcon className="validated" />
   return (
@@ -24,7 +24,7 @@ export const LedgerEntryHash = ({
     >
       <div className="bar" style={barStyle} />
       <div className="ledger-hash">
-        <div className="hash-concat">{hash.hash.substr(0, 6)}</div>
+        <div className="hash-concat">{hash.hash.substring(0, 6)}</div>
         {validated}
       </div>
       <div className="subtitle">

src/containers/NFT/NFT.tsx

@@ -33,7 +33,7 @@ const Page: FC<PropsWithChildren<{ tokenId: string }>> = ({
   children,
 }) => (
   <div className="nft-page">
-    <Helmet title={`NFT ${tokenId.substr(0, 12)}...`} />
+    <Helmet title={`NFT ${tokenId.substring(0, 12)}...`} />
     {children}
   </div>
 )

src/containers/Network/Hexagons.jsx

@@ -42,7 +42,7 @@ const prepareHexagons = (data, list, height, radius, prev = []) => {
       ...list[d.pubkey],
       prev:
         prev[i] && prev[i].ledger_hash !== d.ledger_hash
-          ? prev[i].ledger_hash.substr(0, 6)
+          ? prev[i].ledger_hash.substring(0, 6)
           : undefined,
     }
   })
@@ -70,7 +70,7 @@ export const Hexagons = ({ list, data }) => {
 
   const renderHexagon = (d, theHex) => {
     const { cookie, pubkey, ledger_hash: ledgerHash } = d
-    const fill = `#${ledgerHash.substr(0, 6)}`
+    const fill = `#${ledgerHash.substring(0, 6)}`
     const strokeWidth = theHex.radius() / 16
     return (
       <g

src/containers/Network/ValidatorsTable.jsx

@@ -76,7 +76,7 @@ class ValidatorsTable extends Component {
 
   renderValidator = (d) => {
     const { metrics } = this.state
-    const color = d.ledger_hash ? `#${d.ledger_hash.substr(0, 6)}` : ''
+    const color = d.ledger_hash ? `#${d.ledger_hash.substring(0, 6)}` : ''
     const trusted = d.unl ? 'yes' : 'no'
     const pubkey = d.master_key || d.signing_key
     const onNegativeUnl = metrics.nUnl && metrics.nUnl.includes(pubkey)

src/containers/Validators/index.tsx

@@ -132,9 +132,9 @@ export const Validator = () => {
     if (data.domain) {
       short = data.domain
     } else if (data.master_key) {
-      short = `${data.master_key.substr(0, 8)}...`
+      short = `${data.master_key.substring(0, 8)}...`
     } else if (data.signing_key) {
-      short = `${data.signing_key.substr(0, 8)}...`
+      short = `${data.signing_key.substring(0, 8)}...`
     }
 
     return <Helmet title={`${t('validator')} ${short}`} />
@@ -145,9 +145,9 @@ export const Validator = () => {
     if (data?.domain) {
       name = `Validator / Domain: ${data.domain}`
     } else if (data?.master_key) {
-      name = `Validator / Public Key: ${data.master_key.substr(0, 8)}...`
+      name = `Validator / Public Key: ${data.master_key.substring(0, 8)}...`
     } else if (data?.signing_key) {
-      name = `Validator / Ephemeral Key: ${data.signing_key.substr(0, 8)}...`
+      name = `Validator / Ephemeral Key: ${data.signing_key.substring(0, 8)}...`
     }
 
     let subtitle = 'UNKNOWN KEY'

src/containers/shared/components/Tooltip/Tooltip.tsx

@@ -36,7 +36,7 @@ export const Tooltip = ({ tooltip }: { tooltip?: TooltipInstance }) => {
 
   const renderNegativeUnlTooltip = () =>
     data.nUnl.map((key) => {
-      const short = key.substr(0, 8)
+      const short = key.substring(0, 8)
       return <div key={key} className={`nUnl: ${key}`}>{`${short}...`}</div>
     })
 

src/containers/shared/components/Transaction/EscrowCancel/Description.tsx

@@ -58,7 +58,7 @@ const Description: TransactionDescriptionComponent = (
           to={TRANSACTION_ROUTE}
           params={{ identifier: deleted.FinalFields.PreviousTxnID }}
         >
-          {`${deleted.FinalFields.PreviousTxnID.substr(0, 6)}...`}
+          {`${deleted.FinalFields.PreviousTxnID.substring(0, 6)}...`}
         </RouteLink>
       </Trans>
     </>

src/containers/shared/components/Transaction/EscrowFinish/Description.tsx

@@ -59,7 +59,7 @@ const Description: TransactionDescriptionComponent = (
           to={TRANSACTION_ROUTE}
           params={{ identifier: deleted.FinalFields.PreviousTxnID }}
         >
-          {`${deleted.FinalFields.PreviousTxnID.substr(0, 6)}...`}
+          {`${deleted.FinalFields.PreviousTxnID.substring(0, 6)}...`}
         </RouteLink>
       </Trans>
       {data.tx.Fulfillment && (

src/containers/shared/transactionUtils.ts

@@ -160,7 +160,7 @@ export function groupAffectedNodes(trans: Transaction) {
 export function decodeHex(hex: string) {
   let str = ''
   for (let i = 0; i < hex.length; i += 2) {
-    const v = parseInt(hex.substr(i, 2), 16)
+    const v = parseInt(hex.substring(i, i + 2), 16)
     str += v ? String.fromCharCode(v) : ''
   }
   return str