Fix use of setSpendingCap locale string to properly use our i18n interpolation system

[danjm]

Currently, in token-allowance.js we have this code:

<Box marginBottom={5}>
        <Typography
          variant={TYPOGRAPHY.H3}
          fontWeight={FONT_WEIGHT.BOLD}
          align={TEXT_ALIGN.CENTER}
        >
          {isFirstPage ? t('setSpendingCap') : t('reviewSpendingCap')}
        </Typography>
      </Box>
      <Box>
        <ContractTokenValues
          tokenName={tokenSymbol}
          address={tokenAddress}
          chainId={fullTxData.chainId}
          rpcPrefs={rpcPrefs}
        />
      </Box>

setSpendingCap is defined in the locale file as follows:

  "setSpendingCap": {
    "message": "Set a spending cap for your"
  },

This is a problem because this won't be able to be translated to a language that would place the contract token values somewhere other than the end of the string.

That is why we have a system of replacable symbols in the translation files. Take, for example, spendLimitRequestBy:

  "spendLimitRequestedBy": {
    "message": "Spend limit requested by $1",
    "description": "Origin of the site requesting the spend limit"
  },

Which gets used as follows (in edit-approval-permission.component.js):

{t('spendLimitRequestedBy', [origin])}

The second parameter passed to the translation function can be a whole react component.

We should refactor the definition of setSpendingCap and its use in token-allowance.js to follow this pattern.

Also, another case of this is introduced here: https://github.com/MetaMask/metamask-extension/pull/16157/files#diff-7509d7529ea1cbc57ef79713676f7d124d9d5a446053f94836876c4cd3f3ccd6R2941, that should be fixed as well