wallet-ext: display shorter messages for sync errors (MystenLabs#7432)

* when the error contains an html tag remove it, display only the error
from the sdk and the title if found in html

| before | after |
| -- | -- |
| <img width="478" alt="Screenshot 2023-01-16 at 19 14 16"
src="https://user-images.githubusercontent.com/10210143/212751513-2fb35c10-6adb-420f-a4a3-6a8dcb8770f1.png">
| <img width="381" alt="Screenshot 2023-01-19 at 12 33 45"
src="https://user-images.githubusercontent.com/10210143/213444056-6c9fb707-c424-4609-8998-46c9d046a4f1.png">
|

closes: APPS-335

.changeset/sour-zoos-pretend.md

@@ -0,0 +1,5 @@
+---
+"@mysten/sui.js": patch
+---
+
+RPC requests errors now don't include the html response text (to keep message shorter)

apps/wallet/src/ui/app/pages/home/nfts/index.tsx

@@ -21,7 +21,9 @@ function NftsPage() {
                 <PageTitle title="NFTs" className="justify-center" />
                 {showError && error ? (
                     <Alert>
-                        <strong>Sync error (data might be outdated).</strong>{' '}
+                        <div>
+                            <strong>Sync error (data might be outdated)</strong>
+                        </div>
                         <small>{error.message}</small>
                     </Alert>
                 ) : null}

apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx

@@ -106,7 +106,9 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
             <div className={st.container} data-testid="coin-page">
                 {showError && error ? (
                     <Alert className={st.alert}>
-                        <strong>Sync error (data might be outdated).</strong>{' '}
+                        <div>
+                            <strong>Sync error (data might be outdated)</strong>
+                        </div>
                         <small>{error.message}</small>
                     </Alert>
                 ) : null}

sdk/typescript/src/rpc/client.ts

@@ -78,7 +78,12 @@ export class JsonRpcClient {
           if (res.ok) {
             callback(null, result);
           } else {
-            callback(new Error(`${res.status} ${res.statusText}: ${result}`));
+            const isHtml = res.headers.get('content-type') === 'text/html';
+            callback(
+              new Error(
+                `${res.status} ${res.statusText}${isHtml ? '' : `: ${result}`}`
+              )
+            );
           }
         } catch (err) {
           if (err instanceof Error) callback(err);