[$500] Web - Wallet - BlockingViews component has grey background and another animation

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.21-1
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #32253

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings -> Wallet -> Press Enable wallet

Expected Result:

The BlockingViews component has a white background and same animation as in PR's video

Actual Result:

The BlockingViews component has a grey background and another animation as in PR`s video and prod

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6331621_1704312088476.bandicam_2024-01-03_15-11-09-739.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c2760f292f8f6de8
• Upwork Job ID: 1742949003985174528
• Last Price Increase: 2024-01-18

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Beamanator]

@cdOut @0xmiroslav @joelbettner it looks like this could have been caused due to your typescript migration PR: #32253

Anyone free to take a look? I'd prefer not to revert if possible

[marcaaron]

This feels like it can be fixed as a follow up as it is a small UI issue.

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Beamanator]

Hmm ya this doesn't seem like a blocker if it's just a style / animation diff... Also i don't see how that would have been changed by the linked typescript PR, may have another cause

[melvin-bot]

Current assignee @MitchExpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Beamanator]

I did NOT mean to remove the bug label...

[Beamanator]

I did NOT mean to remove the bug label...

[cdOut]

@cdOut it looks like this could have been caused due to your typescript migration PR: #32253

@Beamanator I will look into whether this is an issue caused by my PR and get back to you.

[0xmiros]

@Beamanator Please assign me here as C+. I will check too

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01c2760f292f8f6de8

[melvin-bot]

Current assignee @0xmiroslav is eligible for the External assigner, not assigning anyone new.

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The BlockingViews component has a grey background and another animation as in PR`s video and prod

What is the root cause of that problem?

We're not applying custom color to the Plaid overlay so it has default gray color.

I'm not sure which PR causes this but it seems related to Plaid sandbox mode, we might have changed the token/Plaid settings on server side.

What changes do you think we should make in order to solve the problem?

Apply custom color (likely white, can use same color as on prod) to the Plaid overlay. We can target via CSS.

What alternative solutions did you explore? (Optional)

We can customize the background color per theme if we want to.

[0xmiros]

This was deploy blocker and fully frontend change so I believe offending PR can be found.

[cdOut]

After reviewing it seems like this is the correct behaviour. When using the staging web version of the app we by default have the preferences option "Use Staging Server" enabled, causing the Plaid connections to use the sandbox version for testing, which has limited animations and a different background. If we switch the staging server option off, we get the production version.

In short, this isn't a bug and is the correct behavior for when you are using the staging server for Plaid connections. If you want the production version on the staging web app, you have to switch that option off in Preferences as shown in video.

Screen.Recording.2024-01-05.at.16.33.32.mov

[cdOut]

cc: @Beamanator @0xmiroslav

[melvin-bot]

@Beamanator, @MitchExpensify, @0xmiroslav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MitchExpensify]

In short, this isn't a bug and is the correct behavior for when you are using the staging server for Plaid connections.

Do you think @cdOut is right about this being expected? @Beamanator @marcaaron

The grey background certainly seems to be the case in OldDot on staging too

[Beamanator]

Ooh iiiinteresting - that's a very good point, probably a "Sandbox mode" thing! That does make sense to me, can we make sure TestRail is updated so we don't create issues like this again in the future?

[MitchExpensify]

can we make sure TestRail is updated so we don't create issues like this again in the future?

@kbecciv do you think we need to update anything in TestRail to avoid Sandbox causing us to think this is a bug again?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[MitchExpensify]

Friendly bump on the above @kbecciv

[melvin-bot]

@Beamanator @MitchExpensify @0xmiroslav this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@Beamanator, @MitchExpensify, @0xmiroslav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[0xmiros]

Not overdue

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[MitchExpensify]

Confirmed with @kbecciv that this wasn't caught via TestRail, its was caught in this PR, so we don't have to update anything - Closing