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