Render error tx844

[sohammk08]

High Level Overview of Change

Made changes in translations.json to exclude connection.server.publicKey from server_ledgers_hint

Context of Change

This change was made because the connection.server.publicKey in server_ledgers_hint in translations.json wasn't able to function properly. Upon closer inspection, it was found that the reason for this occurrence was the publicKey field being empty. Removed the connection.server.publicKey part and restructured sentences accordingly.

Type of Change

• [x] Translation Updates

TypeScript/Hooks Update

• [ ] Updated files to React Hooks
• [ ] Updated files to TypeScript

Before / After

Before:

"server_ledgers_hint": "This node {{connection.server.publicKey}} only contains ledgers {{connection.ledger.validated}}",

After:

"server_ledgers_hint": "This node only contains ledgers {{connection.ledger.validated}}",

Test Plan

[sohammk08]

@ckniffen @pdp2121 @mvadari I finally have an update. I managed to get the publicKey part working.

However, I'm still not sure about the part where we display server_ledgers_hint if publicKey does not exist and server_ledgers_hint_with_key if it does.

Here is where I currently am, for reference:

[pdp2121]

@ckniffen @pdp2121 @mvadari I finally have an update. I managed to get the publicKey part working.

However, I'm still not sure about the part where we display server_ledgers_hint if publicKey does not exist and server_ledgers_hint_with_key if it does.

Here is where I currently am, for reference:

@sohammk08 You could use ternary operator to condition on whether the publicKey exists and display different messages based on that.

[sohammk08]

@pdp2121 @mvadari @ckniffen I have solved the error and now, it works properly. Just to make sure, I have also tested to see if it works, and it does. I am giving below the method I used to test. I will be making a commit containing the changes soon after writing this comment. Below is how I tested it to make sure if it works or not. Take a look:

Original file:

  const notFound = title.includes('not_found')
  const hintMsg = hints.map((hint) => (
    <div className="hint" key={hint}>
      {t(hint as any, values)}
    </div>
  ))
  const derivedWarning = warning ?? (notFound && t('not_found'))

  return (
    <div className="no-match">
      <Helmet title={t(title as any)} />
      {isError && <div className="uh-oh">{t('uh_oh')}</div>}
      <div className="title">{t(title as any, values)}</div>
      {hintMsg}
      {(derivedWarning || isError) && (
        <div className="warning">
          <InfoIcon title={derivedWarning} />
          &nbsp;
          <span>{derivedWarning}</span>
        </div>
      )}
    </div>
  )
}

export default NoMatch

Changed file:

  const notFound = title.includes('not_found')

  // Determine which hint message to display based on the presence of publicKey
  const hintMsg = values.connection?.server?.publicKey
    ? t('server_ledgers_hint_with_key', values)
    : t('server_ledgers_hint', values)

  const derivedWarning = warning ?? (notFound && t('not_found'))

  return (
    <div className="no-match">
      <Helmet title={t(title as any)} />
      {isError && <div className="uh-oh">{t('uh_oh')}</div>}
      <div className="title">{t(title as any, values)}</div>
      {hintMsg && <div className="hint">{hintMsg}</div>}
      {(derivedWarning || isError) && (
        <div className="warning">
          <InfoIcon title={derivedWarning} />
          &nbsp;
          <span>{derivedWarning}</span>
        </div>
      )}
    </div>
  )
}

export default NoMatch

I also made changes to translations.json as such:

  "server_ledgers_hint": "This node only contains ledgers {{connection.ledger.validated}}",
  "server_ledgers_hint_with_key": "This node ({{connection.server.publicKey, truncate(length: 10)}}) only contains ledgers {{connection.ledger.validated}}",

Also, here is how I tested whether the change works or not; First, I set the publicKey to null for debugging purposes. Then, I changed the hintMsg line. Here is how it looks in code:

  const notFound = title.includes('not_found')
  const publicKey = null

  // Determine which hint message to display based on the presence of publicKey
  const hintMsg = publicKey
    ? t('server_ledgers_hint_with_key', values)
    : t('server_ledgers_hint', values)

  const derivedWarning = warning ?? (notFound && t('not_found'))

I checked the logic after adding the above debugging code as said before. Please let me know if I should try and implement a test in NoMatch.test.tsx for the same. Also, as @pdp2121 suggested, I set the server_ledgers_hint_with_key for other language translations as null

Have a good day :)

[pdp2121]

@pdp2121 @mvadari @ckniffen I have solved the error and now, it works properly. Just to make sure, I have also tested to see if it works, and it does. I am giving below the method I used to test. I will be making a commit containing the changes soon after writing this comment. Below is how I tested it to make sure if it works or not. Take a look:

Original file:

  const notFound = title.includes('not_found')
  const hintMsg = hints.map((hint) => (
    <div className="hint" key={hint}>
      {t(hint as any, values)}
    </div>
  ))
  const derivedWarning = warning ?? (notFound && t('not_found'))

  return (
    <div className="no-match">
      <Helmet title={t(title as any)} />
      {isError && <div className="uh-oh">{t('uh_oh')}</div>}
      <div className="title">{t(title as any, values)}</div>
      {hintMsg}
      {(derivedWarning || isError) && (
        <div className="warning">
          <InfoIcon title={derivedWarning} />
          &nbsp;
          <span>{derivedWarning}</span>
        </div>
      )}
    </div>
  )
}

export default NoMatch

Changed file:

  const notFound = title.includes('not_found')

  // Determine which hint message to display based on the presence of publicKey
  const hintMsg = values.connection?.server?.publicKey
    ? t('server_ledgers_hint_with_key', values)
    : t('server_ledgers_hint', values)

  const derivedWarning = warning ?? (notFound && t('not_found'))

  return (
    <div className="no-match">
      <Helmet title={t(title as any)} />
      {isError && <div className="uh-oh">{t('uh_oh')}</div>}
      <div className="title">{t(title as any, values)}</div>
      {hintMsg && <div className="hint">{hintMsg}</div>}
      {(derivedWarning || isError) && (
        <div className="warning">
          <InfoIcon title={derivedWarning} />
          &nbsp;
          <span>{derivedWarning}</span>
        </div>
      )}
    </div>
  )
}

export default NoMatch

I also made changes to translations.json as such:

  "server_ledgers_hint": "This node only contains ledgers {{connection.ledger.validated}}",
  "server_ledgers_hint_with_key": "This node ({{connection.server.publicKey, truncate(length: 10)}}) only contains ledgers {{connection.ledger.validated}}",

Also, here is how I tested whether the change works or not; First, I set the publicKey to null for debugging purposes. Then, I changed the hintMsg line. Here is how it looks in code:

  const notFound = title.includes('not_found')
  const publicKey = null

  // Determine which hint message to display based on the presence of publicKey
  const hintMsg = publicKey
    ? t('server_ledgers_hint_with_key', values)
    : t('server_ledgers_hint', values)

  const derivedWarning = warning ?? (notFound && t('not_found'))

I checked the logic after adding the above debugging code as said before. Please let me know if I should try and implement a test in NoMatch.test.tsx for the same. Also, as @pdp2121 suggested, I set the server_ledgers_hint_with_key for other language translations as null

Have a good day :)

Hi @sohammk08, it would be nice if you could add a test inside NoMatch.test.tsx. Thanks for your contribution!

[pdp2121]

Tests are failing since we are using node 18 instead.

[sohammk08]

Tests are failing since we are using node 18 instead.

Yes. I checked the staging branch of the ripple/staging and all tests are passing. I ran npm run test and almost 11 tests are failing. Hopefully, I will be committing the revised code such that it doesn't fail any tests and. Thanks for your input.

Good Day.