Show spinner and `Loading...` on NTP Rewards widget, Rewards panel, and rewards-internals page when balance cannot be fetched from custodian

[Miyayes]

Description

There are cases where the user's Rewards balance cannot be fetched from the custodian. As a result:

1. brave://rewards-internals balance info is missing information. Instead, it should (given constraints mentioned by Szilard): (1) show Rewards BAT always, and can default to 0 BAT, (2) for custodial-BAT, hide lines for custodians the user is NOT connected to. For the custodian user is connected to (e.g., Gemini-BAT: X BAT) that aren't loading, it should say "Loading..." in place of "X BAT".
2. The Rewards NTP widget shows 0.0 BAT. Instead, it should show a loading spinner animation.
3. Use same ":spinner: Loading..." on Rewards panel.

NTP Widget should look like this: Note: Shorten to "Loading..."

https://www.figma.com/file/QCBklDojDtDTKApz10XqSQ/%F0%9F%97%82-New-Tab-Page?node-id=0%3A1&t=hYCWRUXM1x9Xnxsj-0

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.50.85 Chromium: 111.0.5563.64 (Official Build) beta (64-bit)
-- | --
Revision | c710e93d5b63b7095afe8c2c17df34408078439d-refs/branch-heads/5563@{#995}
OS | Windows 10 Version 21H2 (Build 19044.2604)

• Verified the test plan from https://github.com/brave/brave-core/pull/17294

Uphold_PASSED

Uphold wallet (pre-req: have Charles Proxy set up to return 500 error for `https://api-sandbox.uphold.com/v0/me/cards/*`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in NTP Widget when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | NTP Widget | brave://rewards-internals ------------------|-----------|---------------|----------------------------  |  |  |  Logs: ``` [ REQUEST ] > URL: https://api-sandbox.uphold.com/v0/me/cards/a93f.... > Method: GET [9136:21036:0313/193548.729:VERBOSE6:logging_util.cc(134)] .... [ RESPONSE - OnRequest ] > Url: https://api-sandbox.uphold.com/v0/me/cards/a93f.... > Result: Failure > HTTP Code: 500 > Body: {"CreatedByApplicationId":"193a77cf-02e8-4e10-8127-8a1b5a8bfece","address":{"wire":"UH33480D32"},"available":"32.5375","balance":"32.5375","currency":"BAT","id":"a93f3116-6bfb-46ae-aafe-a644ffa78437","label":"Brave Browser","lastTransactionAt":"2023-03-09T15:19:21.255Z","normalized":[{"available":"5.99","balance":"5.99","currency":"GBP"}],"settings":{"position":1,"protected":false,"starred":true},"wire":[{"accountName":"Uphold Europe Limited","address":{"line1":"Tartu mnt 2","line2":"10145 Tallinn, Estonia"},"bic":"LHVBEE22","currency":"EUR","iban":"EE76 7700 7710 0159 0178","name":"AS LHV Pank"},{"accountName":"Uphold Europe Limited","accountNumber":"00000083","address":{"line1":"1 Angel Court","line2":"London, EC2R 7HJ"},"bic":"LHVBEE22","currency":"GBP","iban":"EE76 7700 7710 0159 0178","name":"AS LHV PANK UK BRANCH","sortCode":"040300"},{"accountName":"Uphold HQ, Inc.","accountNumber":"299007316","address":{"line1":"99 Park Avenue, Floor 4","line2":"New York, NY 10016"},"bic":"MCBEUS33","currency":"USD","name":"Metropolitan Commercial Bank","routingNumber":"026013356"}]} [9136:21036:0313/193548.729:VERBOSE9:logging_util.cc(135)] [ RESPONSE HEADERS ] > Url: https://api-sandbox.uphold.com/v0/me/cards/a93f.... > Header alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400 > Header cf-cache-status: DYNAMIC > Header cf-ray: 7a74d5470c7a3187-BOM > Header content-encoding: br > Header content-security-policy: default-src "none" > Header content-type: application/json; charset=utf-8 > Header date: Mon, 13 Mar 2023 14:05:40 GMT > Header expect-ct: max-age=0 > Header expect-staple: max-age=0 > Header rate-limit-remaining: 29983 > Header rate-limit-reset: 1678716428 > Header rate-limit-total: 30000 > Header request-id: 7a74d5470c7a3187-BOM > Header server: cloudflare > Header strict-transport-security: max-age=15724800; includeSubDomains > Header vary: Origin > Header x-accepted-oauth-scopes: cards:read > Header x-content-type-options: nosniff > Header x-frame-options: DENY > Header x-oauth-scopes: cards:read cards:write user:read transactions:transfer:application transactions:transfer:others transactions:read > Header x-xss-protection: 1; mode=block [9136:21036:0313/193548.739:INFO:get_card.cc(44)] Unexpected HTTP status: 500 [9136:21036:0313/193548.749:INFO:uphold.cc(115)] Couldn't get balance [9136:21036:0313/193548.749:INFO:wallet_balance.cc(97)] Failed to fetch balance for uphold wallet! ```

Gemini_PASSED

Gemini wallet (pre-req: have Charles Proxy set up to return 500 error for `https://api.sandbox.gemini.com/v1/balances`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in NTP Widget when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | NTP Widget | brave://rewards-internals ------------------|-----------|---------------|----------------------------  |  |  |  Logs: ``` [ REQUEST ] > URL: https://api.sandbox.gemini.com/v1/balances > Method: POST .... [ RESPONSE - OnRequest ] > Url: https://api.sandbox.gemini.com/v1/balances > Result: Failure > HTTP Code: 500 > Body: [{"amount":"100000.00","available":"100000.00","availableForWithdrawal":"100000.00","currency":"USD","type":"exchange"},{"amount":"20000","available":"20000","availableForWithdrawal":"20000","currency":"LTC","type":"exchange"},{"amount":"20000","available":"20000","availableForWithdrawal":"20000","currency":"ETH","type":"exchange"},{"amount":"20000","available":"20000","availableForWithdrawal":"20000","currency":"ZEC","type":"exchange"},{"amount":"20000","available":"20000","availableForWithdrawal":"20000","currency":"BCH","type":"exchange"},{"amount":"1963.675","available":"1963.675","availableForWithdrawal":"1963.675","currency":"BAT","type":"exchange"},{"amount":"1000","available":"1000","availableForWithdrawal":"1000","currency":"BTC","type":"exchange"}] [10976:13180:0313/185044.284:VERBOSE9:logging_util.cc(135)] [ RESPONSE HEADERS ] > Url: https://api.sandbox.gemini.com/v1/balances > Header content-length: 768 > Header content-type: application/json > Header date: Mon, 13 Mar 2023 13:20:36 GMT > Header server: nginx > Header vary: Origin [10976:13180:0313/185044.299:INFO:gemini.cc(112)] Couldn't get balance [10976:13180:0313/185044.299:INFO:wallet_balance.cc(97)] Failed to fetch balance for gemini wallet! ```

bitFlyer_PASSED

bitFlyer wallet (pre-req: have Charles Proxy set up to return 500 error for `https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in NTP Widget when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | NTP Widget | brave://rewards-internals ------------------|-----------|---------------|----------------------------  |  |  |  Logs: ``` [ REQUEST ] > URL: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory > Method: GET [17168:15080:0313/191259.807:VERBOSE6:logging_util.cc(134)] .... [ RESPONSE - OnRequest ] > Url: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory > Result: Failure > HTTP Code: 500 > Body: {"account_hash":"7e2......","inventory":[{"amount":263.0,"available":263.0,"currency_code":"JPY"},{"amount":0.0,"available":0.0,"currency_code":"BTC"},{"amount":0.0,"available":0.0,"currency_code":"BCH"},{"amount":0.0,"available":0.0,"currency_code":"ETH"},{"amount":0.0,"available":0.0,"currency_code":"ETC"},{"amount":0.0,"available":0.0,"currency_code":"LTC"},{"amount":0.0,"available":0.0,"currency_code":"MONA"},{"amount":0.0,"available":0.0,"currency_code":"LSK"},{"amount":0.0,"available":0.0,"currency_code":"XRP"},{"amount":116.85,"available":116.85,"currency_code":"BAT"},{"amount":0.0,"available":0.0,"currency_code":"XLM"},{"amount":0.0,"available":0.0,"currency_code":"XEM"},{"amount":0.0,"available":0.0,"currency_code":"XTZ"},{"amount":0.0,"available":0.0,"currency_code":"DOT"},{"amount":0.0,"available":0.0,"currency_code":"LINK"},{"amount":19293.84978,"available":19293.84978,"currency_code":"XYM"},{"amount":0.0,"available":0.0,"currency_code":"MATIC"},{"amount":0.0,"available":0.0,"currency_code":"MKR"}]} [17168:15080:0313/191327.183:VERBOSE9:logging_util.cc(135)] [ RESPONSE HEADERS ] > Url: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory > Header access-control-expose-headers: Request-Context > Header cache-control: no-cache > Header connection: keep-alive > Header content-encoding: gzip > Header content-length: 287 > Header content-security-policy: frame-ancestors 'self' > Header content-type: application/json; charset=utf-8 > Header date: Mon, 13 Mar 2023 13:43:18 GMT > Header expires: -1 > Header pragma: no-cache > Header request-context: appId=cid-v1:02b3eb01-bff1-4f38-b89d-aa364dbcbb1a > Header strict-transport-security: max-age=31536000 > Header x-content-type-options: nosniff > Header x-frame-options: SAMEORIGIN > Header x-xss-protection: 1; mode=block [17168:15080:0313/191327.183:INFO:get_balance_bitflyer.cc(42)] Unexpected HTTP status: 500 [17168:15080:0313/191327.199:INFO:bitflyer.cc(113)] Couldn't get balance [17168:15080:0313/191327.199:INFO:wallet_balance.cc(97)] Failed to fetch balance for bitflyer wallet! ```

[GeetaSarvadnya]

Verification PASSED on Samsung Galaxy version 12 running Bravemonoarm64.apk_1.50.90

• Verified the test plan from https://github.com/brave/brave-core/pull/17294
• Logged https://github.com/brave/brave-browser/issues/29054

Uphold_PASSED

Uphold wallet (pre-req: have Charles Proxy set up to return 500 error for `https://api-sandbox.uphold.com/v0/me/cards/*`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance, encountered https://github.com/brave/brave-browser/issues/29054 - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | brave://rewards-internals ------------------|-----------|---------------  |  |  Logs: ``` [ REQUEST ] > URL: https://api-sandbox.uphold.com/v0/me/cards/a93f311..... > Method: GET .... [ RESPONSE - OnRequest ] > Url: https://api-sandbox.uphold.com/v0/me/cards/a93f311...... > Result: Failure > HTTP Code: 500 > Body: {"CreatedByApplicationId":"193a77cf-02e8-4e10-8127-8a1b5a8bfece","address":{"wire":"UH33480D32"},"available":"32.5375","balance":"32.5375","currency":"BAT","id":"a93f3116-6bfb-46ae-aafe-a644ffa78437","label":"Brave Browser","lastTransactionAt":"2023-03-09T15:19:21.255Z","settings":{"position":1,"protected":false,"starred":true},"normalized":[{"available":"6.30","balance":"6.30","currency":"GBP"}],"wire":[{"accountName":"Uphold Europe Limited","address":{"line1":"Tartu mnt 2","line2":"10145 Tallinn, Estonia"},"bic":"LHVBEE22","currency":"EUR","iban":"EE76 7700 7710 0159 0178","name":"AS LHV Pank"},{"accountName":"Uphold Europe Limited","accountNumber":"00000083","address":{"line1":"1 Angel Court","line2":"London, EC2R 7HJ"},"bic":"LHVBEE22","currency":"GBP","iban":"EE76 7700 7710 0159 0178","name":"AS LHV PANK UK BRANCH","sortCode":"040300"},{"accountName":"Uphold HQ, Inc.","accountNumber":"299007316","address":{"line1":"99 Park Avenue, Floor 4","line2":"New York, NY 10016"},"bic":"MCBEUS33","currency":"USD","name":"Metropolitan Commercial Bank","routingNumber":"026013356"}]} 2023-03-14 17:16:53.414 6091-6091/? I/chromium: [INFO:get_card.cc(44)] Unexpected HTTP status: 500 2023-03-14 17:16:53.416 6091-6091/? I/chromium: [INFO:uphold.cc(115)] Couldn't get balance 2023-03-14 17:16:53.417 6091-6091/? I/chromium: [INFO:wallet_balance.cc(97)] Failed to fetch balance for uphold wallet! ```

Gemini_PASSED

Gemini wallet (pre-req: have Charles Proxy set up to return 500 error for `https://api.sandbox.gemini.com/v1/balances`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance, Logged https://github.com/brave/brave-browser/issues/29054 - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | brave://rewards-internals ------------------|-----------|---------------  |  |  Logs: ``` [ REQUEST ] > URL: https://api.sandbox.gemini.com/v1/balances > Method: POST .... [ RESPONSE - OnRequest ] > Url: https://api.sandbox.gemini.com/v1/balances > Result: Failure > HTTP Code: 500 > Body: [{"type":"exchange","currency":"USD","amount":"100000.00","available":"100000.00","availableForWithdrawal":"100000.00"},{"type":"exchange","currency":"LTC","amount":"20000","available":"20000","availableForWithdrawal":"20000"},{"type":"exchange","currency":"ETH","amount":"20000","available":"20000","availableForWithdrawal":"20000"},{"type":"exchange","currency":"ZEC","amount":"20000","available":"20000","availableForWithdrawal":"20000"},{"type":"exchange","currency":"BCH","amount":"20000","available":"20000","availableForWithdrawal":"20000"},{"type":"exchange","currency":"BAT","amount":"1963.675","available":"1963.675","availableForWithdrawal":"1963.675"},{"type":"exchange","currency":"BTC","amount":"1000","available":"1000","availableForWithdrawal":"1000"}] 2023-03-14 16:32:31.195 26792-26792/? I/chromium: [INFO:gemini.cc(112)] Couldn't get balance 2023-03-14 16:32:31.196 26792-26792/? I/chromium: [INFO:wallet_balance.cc(97)] Failed to fetch balance for gemini wallet! ```

bitFlyer_PASSED

bitFlyer wallet (pre-req: have Charles Proxy set up to return 500 error for `https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in NTP Widget when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | brave://rewards-internals ------------------|-----------|---------------  |  |  Logs: ``` [ REQUEST ] > URL: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory > Method: GET 2023-03-14 17:27:48.321 9731-9731/? V/chromium: [VERBOSE5:ledger_impl.cc(117)] .... [ RESPONSE - OnRequest ] > Url: https://demo24kiuw4dcyncsy3qlud8u8.azurewebsites.net/api/link/v1/account/inventory > Result: Failure > HTTP Code: 500 > Body: {"account_hash":"7e25dfa49c1a798591cad4a85511834135468a9c","inventory":[{"currency_code":"JPY","amount":263.0,"available":263.0},{"currency_code":"BTC","amount":0.0,"available":0.0},{"currency_code":"BCH","amount":0.0,"available":0.0},{"currency_code":"ETH","amount":0.0,"available":0.0},{"currency_code":"ETC","amount":0.0,"available":0.0},{"currency_code":"LTC","amount":0.0,"available":0.0},{"currency_code":"MONA","amount":0.0,"available":0.0},{"currency_code":"LSK","amount":0.0,"available":0.0},{"currency_code":"XRP","amount":0.0,"available":0.0},{"currency_code":"BAT","amount":116.85,"available":116.85},{"currency_code":"XLM","amount":0.0,"available":0.0},{"currency_code":"XEM","amount":0.0,"available":0.0},{"currency_code":"XTZ","amount":0.0,"available":0.0},{"currency_code":"DOT","amount":0.0,"available":0.0},{"currency_code":"LINK","amount":0.0,"available":0.0},{"currency_code":"XYM","amount":19293.84978,"available":19293.84978},{"currency_code":"MATIC","amount":0.0,"available":0.0},{"currency_code":"MKR","amount":0.0,"available":0.0}]} 2023-03-14 17:28:11.491 10934-10934/? I/chromium: [INFO:get_balance_bitflyer.cc(42)] Unexpected HTTP status: 500 2023-03-14 17:28:11.495 10934-10934/? I/chromium: [INFO:bitflyer.cc(113)] Couldn't get balance 2023-03-14 17:28:11.497 10934-10934/? I/chromium: [INFO:wallet_balance.cc(97)] Failed to fetch balance for bitflyer wallet! ```

[LaurenWags]

Verified with

Brave | 1.50.92 Chromium: 111.0.5563.64 (Official Build) beta (x86_64)
-- | --
Revision | c710e93d5b63b7095afe8c2c17df34408078439d-refs/branch-heads/5563@{#995}
OS | macOS Version 12.6.3 (Build 21G419)

Verified test plan from https://github.com/brave/brave-core/pull/17294. Also confirmed when rewrite rule was removed, the balance call was successful and the balance displayed as expected.

Uphold - PASSED

Uphold wallet (pre-req: have Charles Proxy set up to return 500 error for `https://api-sandbox.uphold.com/v0/me/cards/*`) - Ensured that the ` Loading...` spinner animation is shown in brave://rewards settings page when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in BR panel when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in NTP Widget when rewards custodian is failed to fetch the balance - Ensured that the ` Loading...` spinner animation is shown in brave://rewards-internals page when rewards custodian is failed to fetch the balance brave://rewards | BR panel | NTP Widget | brave://rewards-internals ------------------|-----------|---------------|---------------------------- | | | Logs: ``` [ REQUEST ] > URL: https://api-sandbox.uphold.com/v0/me/cards/16c82421-4b1d-49cd-b811-a97eb74a7e64 > Method: GET [1944:259:0316/115927.679843:VERBOSE6:logging_util.cc(134)] [ RESPONSE - OnRequest ] > Url: https://api-sandbox.uphold.com/v0/me/cards/16c82421-4b1d-49cd-b811-a97eb74a7e64 > Result: Failure > HTTP Code: 500 ```